دليل JavaScript الجزء 8: نظرة عامة على ميزات ES6

اليوم ، في الجزء الثامن من ترجمة دليل JavaScript ، سنراجع ميزات اللغة التي ظهرت فيه بعد إصدار معيار ES6. بطريقة أو بأخرى ، صادفنا العديد من هذه الفرص في وقت سابق ، وسأفكر فيها في مكان ما بمزيد من التفصيل ، في مكان ما من المسلم به. يهدف هذا القسم من الدليل ، إلى جانب الكشف عن بعض المواضيع التي لم نلمسها من قبل ، لتبسيط معرفة مطور مبتدئ في مجال جافا سكريبت الحديث.

→ الجزء 1: البرنامج الأول ، وميزات اللغة والمعايير
→ الجزء 2: نمط الرمز وهيكل البرنامج
→ الجزء 3: المتغيرات ، أنواع البيانات ، التعبيرات ، الأشياء
→ الجزء 4: الميزات
→ الجزء 5: المصفوفات والحلقات
→ الجزء 6: استثناءات ، فواصل منقوطة ، حرفي أحرف البدل
→ الجزء 7: الوضع الصارم ، هذه الكلمة الأساسية ، والأحداث ، والوحدات النمطية ، والحسابات الرياضية
→ الجزء 8: نظرة عامة على ميزات ES6
→ الجزء 9: نظرة عامة على معايير ES7 و ES8 و ES9

حول ES6

ظهر معيار ES6 ، الذي سيكون أكثر صحة لاستدعاء ES2015 أو ECMAScript 2015 (هذه هي أسمائها الرسمية ، على الرغم من أن الجميع يطلق عليها ES6) ، بعد 4 سنوات من إصدار المعيار السابق - ES5.1. لقد استغرق الأمر حوالي عشر سنوات لتطوير كل شيء دخل في معيار ES5.1. في الوقت الحاضر ، أصبح كل ما ظهر في هذا المعيار الأدوات المعتادة لمطور JS. وتجدر الإشارة إلى أن ES6 قد أدخلت تغييرات كبيرة على اللغة (مع الحفاظ على التوافق مع الإصدارات السابقة). من أجل تقدير حجم هذه التغييرات ، يمكن ملاحظة أن حجم الوثيقة التي تصف معيار ES5 هو حوالي 250 صفحة ، والمعيار ES6 موصوف في مستند يحتوي بالفعل على 600 صفحة تقريبًا.

يمكن أن تشمل قائمة أهم الابتكارات لمعيار ES2015 ما يلي:

• وظائف السهم
• وعود
• مولدات
• الكلمات الرئيسية let const
• فصول
• الوحدات
• قالب الدعم الحرفي
• دعم معلمات الوظيفة الافتراضية
• عامل الانتشار
• التخصيص المدمر
• تعزيز حرفية الكائن
• for...of الحلقة
• دعم Map Set هياكل البيانات

فكر في هذه الاحتمالات.

وظائف السهم

لقد غيّرت وظائف السهم شكل وأسلوب شفرة جافا سكريبت. من حيث المظهر ، فإن استخدامها يجعل إعلانات الوظائف أقصر وأسهل. هنا هو إعلان دالة عادية.

 const foo = function foo() { //... } 

ولكن تقريبًا نفس وظيفة السهم (على الرغم من أنها ليست مشابهة تمامًا لما سبق).

 const foo = () => { //... } 

إذا كان جسم دالة السهم يتكون من سطر واحد فقط ، يجب إرجاع النتيجة من هذه الوظيفة ، عندئذٍ تتم كتابتها بشكل أقصر.

 const foo = () => doSomething() 

إذا كانت وظيفة السهم تأخذ معلمة واحدة فقط ، فيمكنك كتابتها على النحو التالي.

 const foo = param => doSomething(param) 

وتجدر الإشارة إلى أنه مع ظهور وظائف الأسهم ، لم تختف الوظائف العادية ، لا يزال من الممكن استخدامها في التعليمات البرمجية ، فهي تعمل بنفس الطريقة كما كانت من قبل.

ميزات هذه الكلمة الرئيسية في وظائف السهم

لا تمتلك دالات الأسهم this القيمة الخاصة بها ؛ فهي ترثها من سياق التنفيذ.

يعمل هذا على إصلاح المشكلة ، والتي كان من الضروري عند استخدام الدالات العادية استخدام بنيات مثل var that = this للحفاظ على السياق. ومع ذلك ، كما هو موضح في الأجزاء السابقة من الدليل ، يؤثر هذا التغيير بشكل خطير على ميزات العمل مع وظائف الأسهم ونطاق تطبيقها.

وعود

تسمح لك الوعود بالتخلص من المشكلة المعروفة باسم "رد الاتصال" ، على الرغم من أن استخدامها يعني استخدام هياكل معقدة إلى حد ما. تم حل هذه المشكلة في معيار ES2017 مع ظهور البناء غير async/await المنتظر ، والذي يعتمد على الوعود.

استخدم مطورو جافا سكريبت الوعود قبل المعيار ES2015 ، باستخدام مكتبات مختلفة لهذا (على سبيل المثال - jQuery ، q ، deferred.js ، نذر). وهذا يشير إلى أهمية وملاءمة هذه الآلية. تقوم المكتبات المختلفة بتطبيقها بطرق مختلفة ، ويمكن اعتبار ظهور معيار في هذا المجال حقيقة إيجابية للغاية.
هنا رمز مكتوب باستخدام وظائف رد الاتصال (رد الاتصال).

 setTimeout(function() { console.log('I promised to run after 1s') setTimeout(function() {   console.log('I promised to run after 2s') }, 1000) }, 1000) 

باستخدام الوعود ، يمكن إعادة كتابة ذلك على النحو التالي.

 const wait = () => new Promise((resolve, reject) => { setTimeout(resolve, 1000) }) wait().then(() => { console.log('I promised to run after 1s') return wait() }) .then(() => console.log('I promised to run after 2s')) 

مولدات

المولدات هي وظائف خاصة يمكنها إيقاف تنفيذها مؤقتًا واستئنافها. هذا يسمح بتنفيذ كود آخر عندما يكون المولد خاملاً.

يقرر المولد من تلقاء نفسه أنه يحتاج إلى التوقف والسماح بتنفيذ كود آخر "ينتظر" دوره. في الوقت نفسه ، لدى المولد الفرصة لمواصلة تنفيذه بعد انتهاء العملية ، التي تنتظر نتائجها.

كل هذا يتم بفضل yield بسيط للكلمة الرئيسية. عندما يتم العثور على هذه الكلمة الرئيسية في المولد ، يتم إيقاف تنفيذها مؤقتًا.
يمكن أن يحتوي المولد على العديد من الأسطر مع هذه الكلمة الأساسية ، مما يؤدي إلى إيقاف التنفيذ الخاص به عدة مرات مؤقتًا. يتم الإعلان عن المولدات باستخدام بنية *function . لا يجب أن تؤخذ هذه العلامة النجمية قبل function الكلمة لشيء مثل عامل الإشارة إلى المؤشر ، المستخدم في لغات مثل C أو C ++ أو Go.

تشير المولدات إلى ظهور نموذج برمجة JavaScript جديد. على وجه الخصوص ، فإنها تسمح بتبادل البيانات في اتجاهين بين المولد والرمز الآخر ، وتسمح بإنشاء حلقات طويلة الأمد while "عدم تعليق" البرنامج.

لنأخذ مثالاً يوضح ميزات تشغيل المولدات. هنا المولد نفسه.

 function *calculator(input) {   var doubleThat = 2 * (yield (input / 2))   var another = yield (doubleThat)   return (input * doubleThat * another) } 

بهذا الأمر نقوم بتهيئته.

 const calc = calculator(10) 

ثم ننتقل إلى مكرر لها.

 calc.next() 

يبدأ هذا الأمر مكررًا ، ويعيد مثل هذا الكائن.

 { done: false value: 5 } 

هنا يحدث ما يلي. ينفّذ الكود وظيفة باستخدام قيمة input تمريرها إلى مُنشئ المولد. يتم تنفيذ كود المولد حتى يتم العثور على الكلمة الرئيسية الخاصة yield . عند هذه النقطة ، ترجع نتيجة قسمة input 2 ، والتي ، نظرًا لأن input 10 ، تعطي الرقم 5 . نحصل على هذا الرقم بفضل المكرر ، وإلى جانبه ، إشارة إلى أن المولد لم يكتمل بعد (تم ضبط الخاصية done في الكائن الذي أرجعه المكرر إلى false ) ، أي أنه تم تعليق الوظيفة فقط.
في المرة التالية التي يتم فيها استدعاء المكرر ، نمرر الرقم 7 إلى المولد.

 calc.next(7) 

رداً على ذلك ، يعيد المكرر الكائن التالي إلينا.

 { done: false value: 14 } 

هنا ، تم استخدام الرقم 7 لحساب القيمة doubleThat .

للوهلة الأولى ، قد يبدو أن كود input / 2 يشبه حجة لبعض الوظائف ، ولكن هذه هي القيمة التي تم إرجاعها عند التكرار الأول. هنا نتخطى هذه القيمة ونستخدم قيمة الإدخال الجديدة 7 ، نضربها في 2 . بعد ذلك ، نصل إلى الكلمة الرئيسية ذات yield الثاني ، ونتيجة لذلك ، فإن القيمة التي تم الحصول عليها في التكرار الثاني هي 14 .

في التكرار التالي ، وهو الأخير ، نمرر الرقم 100 إلى المولد.

 calc.next(100) 

ردًا على ذلك ، نحصل على الكائن التالي.

 { done: true value: 14000 } 

اكتمال التكرار (لم تعد الكلمة الرئيسية الخاصة (input * doubleThat * another) موجودة في المولد) ، (input * doubleThat * another) إرجاع نتيجة تقييم التعبير (input * doubleThat * another) في الكائن ، أي - 10 * 14 * 100 وإشارة إلى اكتمال المكرر ( done: true ).

الكلمات الرئيسية تسمح وثابت

تستخدم جافا سكريبت دائمًا الكلمة الأساسية var للإعلان عن المتغيرات. هذه المتغيرات لها نطاق وظيفي. let الكلمات الأساسية const and const ، على التوالي ، التصريح عن المتغيرات والثوابت التي لها نطاق كتلة.

هذا يعني ، على سبيل المثال ، أن المتغير المعلن عنه باستخدام الكلمة الأساسية let في حلقة ، أو داخل كتلة if ، أو داخل كتلة تعليمات برمجية عادية محدودة بأقواس متعرجة ، لن يتجاوز هذا الكتلة. لا يتم الاحتفاظ بالمتغيرات المعلنة مع var في هذه الكتل ، لتصبح متاحة في الوظيفة على المستوى الذي تم التصريح عنها.

تعمل الكلمة الأساسية const تمامًا مثل let ، ولكن مع ذلك ، يتم الإعلان عن الثوابت غير القابلة للتغيير.

في كود JS الحديث ، نادرًا ما يتم استخدام الكلمة الأساسية var . تفسح المجال للكلمات الرئيسية let and const . في الوقت نفسه ، والذي قد يبدو غير معتاد ، يتم استخدام كلمة أساسية const على نطاق واسع اليوم ، مما يشير إلى شعبية أفكار حصانة الكيانات في البرمجة الحديثة.

فصول

اتضح أن JavaScript كانت اللغة الوحيدة المنتشرة للغاية باستخدام نموذج الوراثة النموذجي. شعر المبرمجون الذين تحولوا إلى JS من اللغات التي تطبق آلية الميراث القائمة على الفصل بعدم الارتياح في مثل هذه البيئة. قدم معيار ES2015 دعم الفئة في JavaScript. هذا هو أساسا "السكر النحوي" حول الآليات الداخلية شبيبة باستخدام النماذج الأولية. ومع ذلك ، يؤثر هذا على كيفية كتابة تطبيقات JS بالضبط.

تبدو آليات وراثة جافا سكريبت الآن مثل آليات مماثلة في لغات أخرى موجهة للكائنات.

 class Person { constructor(name) {   this.name = name } hello() {   return 'Hello, I am ' + this.name + '.' } } class Actor extends Person { hello() {   return super.hello() + ' I am an actor.' } } var tomCruise = new Actor('Tom Cruise') console.log(tomCruise.hello()) 

يعرض هذا البرنامج النص Hello, I am Tom Cruise. I am an actor إلى وحدة التحكم Hello, I am Tom Cruise. I am an actor Hello, I am Tom Cruise. I am an actor .
في فئات JS ، لا يمكن التصريح عن متغيرات الحالة ؛ يجب أن تتم تهيئتها في المنشئات.

Class مُنشئ صنف

تحتوي الفصول على طريقة خاصة ، constructor ، والتي يتم استدعاؤها عند إنشاء مثيل للفئة باستخدام الكلمة الأساسية new .

super الكلمات الرئيسية عظمى

تسمح لك الكلمة الأساسية super بالوصول إلى الفصل الأصل من الفئات التابعة.

▍ الحروف والمستوطنون

يمكن تعيين getter لخاصية على النحو التالي.

 class Person { get fullName() {   return `${this.firstName} ${this.lastName}` } } 

يمكن وصف العارض كما هو موضح أدناه.

 class Person { set age(years) {   this.theAge = years } } 

إنهم يعملون مع الحروف والمستوطنين كما لو أنهم ليسوا وظائف ، ولكن خصائص عادية للأشياء.

الوحدات

قبل معيار ES2015 ، كانت هناك العديد من المناهج المتنافسة للعمل مع الوحدات. على وجه الخصوص ، نحن نتحدث عن تقنيات RequireJS و CommonJS. أدى هذا الوضع إلى خلاف في مجتمع مطوري JS.

في الوقت الحاضر ، وبفضل توحيد الوحدات في ES2015 ، أصبح الوضع يطرأ تدريجيًا.

▍ استيراد وحدات

يتم استيراد الوحدات باستخدام بنية import...from... النموذج import...from... فيما يلي بعض الأمثلة.

 import * as something from 'mymodule' import React from 'react' import { React, Component } from 'react' import React as MyLibrary from 'react' 

▍ تصدير الوحدات

يتم إغلاق الآليات الداخلية للوحدة النمطية من العالم الخارجي ، ولكن من الوحدة النمطية يمكنك تصدير كل ما يمكن أن تقدمه الوحدات الأخرى. يتم ذلك باستخدام الكلمة الأساسية export .

 export var foo = 2 export function bar() { /* ... */ } 

plate قالب حرفي

تعد نماذج القوالب طريقة جديدة لوصف السلاسل في JavaScript. هنا هو كيف يبدو.

 const aString = `A string` 

بالإضافة إلى ذلك ، يسمح لك استخدام بنية حرفية القالب بتضمين التعبيرات في سلاسل وإقحامها. يتم ذلك باستخدام بناء النموذج ${a_variable} . فيما يلي مثال بسيط على استخدامه:

 const v = 'test' const str = `something ${v}` //something test 

فيما يلي مثال أكثر تعقيدًا ، يوضح القدرة على تقييم أي تعبيرات واستبدال نتائجها في سلسلة.

 const str = `something ${1 + 2 + 3}` const str2 = `something ${foo() ? 'x' : 'y' }` 

بفضل استخدام القوالب الحرفية ، من الأسهل بكثير الإعلان عن سلاسل متعددة الأسطر.

 const str3 = `Hey this string is awesome!` 

قارن هذا بما كان عليك فعله لوصف السلاسل المتعددة الأسطر عند استخدام الميزات المتاحة باللغة قبل ES2015.

 var str = 'One\n' + 'Two\n' + 'Three' 

معلمات الوظيفة الافتراضية

تدعم الآن وظائف المعلمات المستخدمة بشكل افتراضي - في حالة عدم تمرير الوسائط المقابلة لها عند استدعاء الدالات.

 const foo = function(index = 0, testing = true) { /* ... */ } foo() 

عامل الانتشار

يتيح لك عامل الانتشار (عامل التمديد) "توسيع" المصفوفات أو الكائنات أو السلاسل. هذا العامل يشبه ثلاث نقاط ( ... ). أولاً ، فكر في ذلك بمثال صفيف.

 const a = [1, 2, 3] 

إليك كيفية إنشاء صفيف جديد بناءً على هذا الصفيف.

 const b = [...a, 4, 5, 6] 

إليك كيفية إنشاء نسخة من الصفيف.

 const c = [...a] 

يعمل هذا العامل أيضًا مع الأشياء. على سبيل المثال ، إليك كيفية استخدامه لنسخ كائن.

 const newObj = { ...oldObj } 

بتطبيق عامل الانتشار على سلسلة ، يمكنك تحويله إلى صفيف ، يحتوي كل عنصر على حرف واحد من هذه السلسلة.

 const hey = 'hey' const arrayized = [...hey] // ['h', 'e', 'y'] 

هذا العامل ، بالإضافة إلى المتغيرات المذكورة أعلاه من تطبيقه ، مناسب للاستخدام عند استدعاء الوظائف التي تتوقع قائمة عادية من الوسيطات ، وتمريرها باستخدام هذه الوسيطات.

 const f = (foo, bar) => {} const a = [1, 2] f(...a) 

سابقًا ، تم إجراء ذلك باستخدام بناء النموذج f.apply(null, a) ، ولكن هذا الرمز أكثر صعوبة في الكتابة ، وهو أقل قابلية للقراءة.

التخصيص المدمر

تسمح تقنية التدمير المدمرة ، على سبيل المثال ، بأخذ كائن واستخراج بعض القيم منه ووضعها في متغيرات أو ثوابت مسماة.

 const person = { firstName: 'Tom', lastName: 'Cruise', actor: true, age: 54, } const {firstName: name, age} = person 

هنا ، يتم استرداد خصائص الاسم الأول age من الكائن. تتم كتابة خاصية age إلى الثابت المعلن بنفس الاسم ، firstName خاصية firstName ، بعد الاستخراج ، في name الثابت.

التخصيص المدمر مناسب أيضًا للعمل مع المصفوفات.

 const a = [1,2,3,4,5] const [first, second, , , fifth] = a 

الثوابت first second fifth تحصل على العناصر الأولى والثانية والخامسة من الصفيف ، على التوالي.

تعزيز حرفية الكائن

وسع ES2015 بشكل كبير من القدرة على وصف الأشياء باستخدام حرفية الكائن.

▍ تبسيط إدراج المتغيرات في الكائنات

في السابق ، من أجل تعيين متغير لخاصية كائن ما ، كان من الضروري استخدام البناء التالي.

 const something = 'y' const x = { something: something } 

الآن يمكن القيام بنفس الشيء على هذا النحو.

 const something = 'y' const x = { something } 

▍ النماذج الأولية

يمكن الآن تعيين النموذج الأولي للكائن باستخدام البناء التالي.

 const anObject = { y: 'y' } const x = { __proto__: anObject } 

super الكلمات الرئيسية عظمى

باستخدام الكلمة الأساسية super ، يمكن للكائنات الوصول إلى كائنات النموذج الأولي. على سبيل المثال ، لاستدعاء أساليبهم التي لها نفس الأسماء مثل أساليب هذه الكائنات نفسها.

 const anObject = { y: 'y', test: () => 'zoo' } const x = { __proto__: anObject, test() {   return super.test() + 'x' } } x.test() //zoox 

names أسماء الممتلكات المحسوبة

يتم تكوين أسماء الخصائص المحسوبة في مرحلة إنشاء الكائن.

 const x = { ['a' + '_' + 'b']: 'z' } x.a_b //z 

ل ... من الحلقة

في عام 2009 ، في معيار forEach() ، ظهرت حلقات forEach() . هذا تصميم مفيد ، ومن عيوبه حقيقة أن مثل هذه الدورات غير مريحة للغاية للمقاطعة. تعد الطريقة التقليدية للحلقة في المواقف التي تحتاج فيها إلى مقاطعة تنفيذ الحلقة قبل اكتمالها الطبيعي خيارًا أكثر ملاءمة.

ظهرت دورة for...of للدورة في ES2015 ، والتي تتميز ، من ناحية ، forEach الجملة الموجزة والراحة forEach ، ومن ناحية أخرى ، تدعم إمكانية الخروج المبكر من الدورة.

فيما يلي زوجان من for...of أمثلة للحلقة.

 //    for (const v of ['a', 'b', 'c']) { console.log(v); } //           entries() for (const [i, v] of ['a', 'b', 'c'].entries()) { console.log(i, v); } 

رسم خرائط وتعيين هياكل البيانات

قدم ES2015 Map و Set بهياكل البيانات (بالإضافة إلى إصداراتها "الضعيفة" WeakMap و WeakSet ، التي يؤدي استخدامها إلى تحسين أداء "جامع البيانات المهملة" - الآلية المسؤولة عن إدارة الذاكرة في محركات JS). هذه هياكل بيانات شائعة جدًا ، كان يجب تقليدها قبل ظهور التنفيذ الرسمي باستخدام أدوات اللغة المتاحة.

ملخص

استعرضنا اليوم ميزات معيار ES2015 ، التي أثرت بشكل كبير على الوضع الحالي للغة. سيكون موضوعنا التالي ميزات لمعايير ES2016 و ES2017 و ES2018.

أعزائي القراء! ما هي ابتكارات معيار ES6 التي تجدها أكثر فائدة؟