ECMAScript 6 - 10 ميزات جديدة رهيبة

هل تعلم أن JavaScript (مع JScript و ActionScript) هو تطبيق لمواصفات لغة البرمجة النصية من جانب العميل للأغراض العامة والتي تسمى ECMAScript؟ لجعل هذا التعريف المقرف أكثر جاذبية قليلاً ، يمكننا القول أن ECMAScript (أو رسمياً ECMA-262) هو المعيار الذي يحدد كيفية استخدامنا لجافا سكريبت ، وما يمكننا تحقيقه مع ذلك.

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

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

دعم ECMAScript 6

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

إذا كنت مهتمًا بدعم ES6 في Node.js ، راجع المستندات هنا.

على الرغم من أنه لا يتم دعم جميع الميزات حاليًا ، إلا أنه يمكننا استخدام أجهزة إرسال مثل Babel لنقل رمز ES6 الخاص بنا إلى ES5. يوجد ملحق إضافي رائع Grunt لـ Babel ، والعديد من إضافات ES6 الرائعة لـ Grunt ، ومكوّن إضافي رائع Gulp-Babel هناك ، لحسن الحظ لدينا خيارات كثيرة.

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

1. جديد سمح الكلمة

ES6 يقدم الجديد سمح الكلمة الأساسية التي تسمح لنا بإعلان المتغيرات المحلية في نطاق الكتلة ، مثل بيان أو تعبير أو دالة (n داخلية). على سبيل المثال يمكننا أن نعلن أ إلى عن على حلقة بالطريقة التالية ، ثم أعد استخدام نفس اسم المتغير (حيث يقتصر نطاقه على إلى عن على حلقة) داخل المقبل إذا بيان:

 ل (دعني = 0 ؛ أنا < myArray.length; i++)  // Do something inside the block  if (x > 0 && x! = y) // نعيد استخدام "i" دعني = x * y

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

2. جديد CONST الكلمة

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

 const MY_CONST = 12 ؛ console.log (MY_CONST)؛ // 12 MY_CONST = 16؛ خطأ صامت ، حيث لا يمكننا إعادة تعيين قيمة جديدة إلى ثابت

لا تكون المتغيرات الثابتة دائمًا غير قابلة للتغيير تمامًا في ECMAScript 6 ، كما لو أن الثابت يحمل كائنًا ، يمكننا بعد ذلك تغيير قيمة خصائصه وطرقه. وينطبق الشيء نفسه على عناصر مجموعة.

 const MY_CONSTANT = myProperty: 6؛ console.log (MY_CONSTANT.myProperty)؛ // 6 MY_CONSTANT.myProperty = 18؛ console.log (MY_CONSTANT.myProperty)؛ // 18 const OTHER_CONSTANT = [12 ، 14 ، 16] ؛ console.log (OTHER_CONSTANT [0])؛ // 12 OTHER_CONSTANT [0] = 22 ؛ console.log (OTHER_CONSTANT [0])؛ 22 /

لا يزال يتعذر علينا إعادة تعيين قيمة جديدة لكائن MY_CONSTANT مباشرةً في مقتطف الشفرة أعلاه ، مما يعني أنه لا يمكننا تغيير أسماء الخصائص والأساليب ، كما لا يمكننا إضافة اسم جديد أو حذف واحد موجود ، لذلك لا يمكننا القيام بذلك الشيء التالي:

 MY_CONSTANT = newProperty: 18؛ console.log (MY_CONSTANT.newProperty)؛ // خطأ

3. وظائف السهم

ECMAScript 6 يسهل كيف نكتب وظائف مجهولة, كما يمكننا حذف تماما وظيفة الكلمة. نحتاج فقط إلى استخدام بناء الجملة الجديد لـ وظائف السهم, سميت باسم => علامة السهم (السهم السمين) ، والتي توفر لنا اختصارًا رائعًا.

 // 1. اسمحوا معلمة واحدة في ES6 sum = (a، b) => a + b؛ // في ES5 var sum = function (a، b) return a + b؛ ؛ // 2. بدون معلمات في ES6 دع randomNum = () => Math.random ()؛ // في ES5 var randomNum = function () return Math.random ()؛ ؛ // 3. بدون الرجوع في ES6 ، اترك message = (name) => alert ("Hi" + name + "!")؛ // في ES5 var message = function (yourName) alert ("Hi" + yourName + "!")؛ ؛

هناك فرق مهم بين الوظائف العادية ووظائف السهم ، أي أن وظائف السهم لا تتلقى هذه قيمة تلقائيا مثل وظائف محددة مع وظيفة الكلمة تفعل. وظائف السهم ربط معجمي ال هذه القيمة إلى النطاق الحالي. هذا يعني أنه يمكننا بسهولة إعادة استخدام هذه الكلمة الأساسية في وظيفة داخلية. في ES5 ، يكون ذلك ممكنًا فقط مع الاختراق التالي:

 // ES5 Hack لاستخدام الكلمة الأساسية "this" في دالة داخلية ... addAll: function addAll (pieces) var self = this؛ _.each (قطعة ، وظيفة (قطعة) self.add (قطعة) ؛) ؛ ، ... // ES6 يمكن الآن استخدام نفس الوظيفة الداخلية الخاصة بها "this" ... addAll: function addAll (pieces) _.each (pieces، piece => this.add (piece))؛  ، ...

الرمز أعلاه هو من موزيلا المأجورون

4. جديد انتشار المشغل أو العامل

الجديد انتشار تم تحديد عامل التشغيل بثلاث نقاط (...) ، ويمكننا استخدامه للتوقيع على مكان العناصر المتعددة المتوقعة. إحدى حالات الاستخدام الأكثر شيوعًا لمشغل الحيز هي إدخال عناصر الصفيف في صفيف آخر:

 دع myArray = [1 ، 2 ، 3] ؛ دع newArray = [... myArray، 4، 5، 6]؛ console.log (newArray)؛ // 1 ، 2 ، 3 ، 4 ، 5 ، 6 

يمكننا أيضا أن نستخدم الرافعة المالية انتشار عامل التشغيل في المكالمات الوظيفية التي نريد تمريرها في الوسائط من صفيف:

 دع myArray = [1 ، 2 ، 3] ؛ مجموع الدالة (a، b، c) return a + b + c؛  console.log (sum (… myArray))؛ // 6

ال انتشار المشغل مرن للغاية ، حيث يمكن استخدامه عدة مرات في نفس المجموعة أو استدعاء الوظيفة.

5. القيم الافتراضية للمعلمات ومعلمات الراحة الجديدة

خبر جيد ، أنه في ECMAScript 6 يمكننا إضافة القيم الافتراضية إلى معلمات دالة. هذا يعني أنه في حالة عدم تمرير الوسائط في استدعاء الوظيفة لاحقًا ، فسيتم استخدام المعلمات الافتراضية. في ES5 ، يتم دائمًا تعيين القيم الافتراضية للمعلمات غير محدد, وبالتالي فإن الاحتمال الجديد لتعيينهم على ما نريد هو بالتأكيد تعزيز كبير للغة.

 مجموع الدالة (a = 2 ، b = 4) return a + b؛  console.log (sum ())؛ // 6 console.log (sum (3، 6))؛ // 9

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

 دالة putInAlphabet (... args) let sorted = args.sort ()؛ عودة فرزها.  console.log (putInAlphabet ("e"، "c"، "m"، "a"، "s"، "c"، "r"، "i"، "p"، "t"))؛ // a ، c ، c ، e ، i ، m ، p ، r ، s ، t

6. جديد ل ... من بيان

بمساعدة الجديد ل ... من حلقة يمكننا تكرارها على المصفوفات أو الأشياء القابلة للتكرار بسهولة. جنبا إلى جنب مع الجديد ل ... من عبارة ، يقدم ECMAScript 6 كائنين جديدين جديدين أيضًا ، خريطة لخرائط المفتاح / القيمة ، وتعيين لمجموعات من القيم الفريدة التي يمكن أن تكون أيضًا قيمًا بدائية ومراجع كائن. عندما نستخدم ل ... من عبارة ، يتم تنفيذ التعليمات البرمجية داخل الكتلة لكل عنصر من عناصر الكائن القابل للتكرار.

 دع myArray = [1 ، 2 ، 3 ، 4 ، 5] ؛ دع المبلغ = 0 ؛ من أجل (دعني من myArray) sum + = i؛  console.log (sum)؛ // 15 (= 1 + 2 + 3 + 4 + 5)

7. قالب الحرفية

يوفر لنا ECMAScript 6 بديلاً جديدًا لسلسلة السلسلة. حرفية القالب اسمح لنا بإنشاء قوالب يمكننا من خلالها تضمين قيم مختلفة في أي مكان نريده. للقيام بذلك نحن بحاجة إلى استخدام $ ... بناء جملة في كل مكان حيث نريد إدراج البيانات التي يمكننا تمريرها من المتغيرات أو المصفوفات أو الكائنات بالطريقة التالية:

 دع العميل = title: 'Ms' ، الاسم: 'Jane' ، اللقب: 'Doe' ، العمر: '34' ؛ واسمحوا القالب = 'عزيزي $ customer.title $ customer.firstname $ customer.s كعب! عيد ميلاد سعيد $ customer.age! '؛ console.log (قالب)؛ // عزيزي السيدة جين دو! عيد ميلاد سعيد 34!

8. فصول

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

في ES6 يتم الإعلان عن الطبقات مع الجديد صف دراسي الكلمة الأساسية ، وتحتاج إلى البناء() الطريقة التي يتم استدعاء عندما يتم إنشاء مثيل كائن جديد باستخدام myClass الجديد () بناء الجملة. من الممكن أيضا تمديد فصول جديدة مع الطبقة الطفل يمتد الأم بناء الجملة التي يمكن أن تكون مألوفة من لغات وجوه المنحى الأخرى مثل PHP. من المهم أيضًا معرفة أنه ، بخلاف الوظيفة والتعريفات المتغيرة ، لا يتم رفع إعلانات الفئة في ECMAScript 6.

 class مضلع مُنشئ (الطول والعرض) // منشئ فئة this.name = 'Polygon'؛ هذا. الارتفاع = الارتفاع ؛ this.width = العرض ؛  sayName () // class method console.log ('مرحبًا ، أنا' ، this.name + '.')؛  دع myPolygon = مضلع جديد (5 ، 6) ؛ console.log (myPolygon.sayName ())؛ // مرحبا ، أنا مضلع.

الكود أعلاه من ES6 Fiddle أمثلة, .

9. وحدات

هل سبق لك أن تساءلت عن مدى روعة إذا كان جافا سكريبت وحدات؟ بالطبع ، كانت هناك حلول مثل CommonJS (المستخدمة في Node.js) أو AMD (تعريف الوحدة غير المتزامنة) (المستخدمة في RequireJS) للقيام بذلك من قبل ، ولكن ES6 تقدم الوحدات النمطية كميزة أصلية.

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

 // jobs.js function cube (a) return a * a * a؛  دالة cubeRoot (a) return Math.cbrt (a)؛  export cube، cubeRoot // أو: export cube as cb، cubeRoot as cr // app.js import cube، cubeRoot من 'jobs'؛ console.log (مكعب (4))؛ // 64 console.log (cubeRoot (125))؛ // 5

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

10. كميات من أساليب جديدة

يقدم ECMAScript 6 العديد من الطرق الجديدة لنموذج السلسلة الحالي وكائن الصفيف ونموذج الصفيف والكائن الرياضي. يمكن للطرق الجديدة أن تحسن بشكل كبير الطريقة التي يمكننا بها معالجة هذه الكيانات. لدى Mozilla Dev أمثلة رائعة على الإضافات الجديدة ، ومن الجدير أن تأخذ وقتًا وتفحصها بدقة.

فقط لإظهار مدى روعتها ، هنا هو المفضل لدي: طريقة البحث عن النموذج الأولي للصفيف ، والتي تمكننا من اختبار معايير معينة على عناصر الصفيف عن طريق تنفيذ وظيفة رد الاتصال على كل عنصر ، ثم إرجاع العنصر الأول الذي عائدات صحيح.

 الدالة isPrime (عنصر ، فهرس ، صفيف) var start = 2؛ بينما (البدء <= Math.sqrt(element))  if (element % start++ < 1)  return false;   return element > 1؛  console.log ([4، 6، 8، 12] .find (isPrime))؛ // undefined، لم يتم العثور على console.log ([4، 5، 8، 12] .find (isPrime))؛ // 5

رمز أعلاه من: موزيلا ديف