سلسلة القالب
هذه واحدة من خصائص ES6 التي أحبها كثيرًا. إنه يعكس العلاقة بين المتغيرات والسلاسل بشكل حدسي للغاية. في ES5 ، إذا أردنا إضافة متغيرات إلى سلاسل ، نحتاج إلى استخدام طريقة الكتابة التالية:
ANIMATION (Box ، 'Translate (-' + itemWidth * num + 'px ، 0)' ، 1000 ، function () {box.style.transitionDuration = '' ؛ box.style.transform = 'translate (-800px ، 0)' ؛ flag =}) ؛الآن باستخدام سلاسل قالب ES6 ، يمكنك الجمع مباشرة بين السلاسل والمتغيرات لتسهيل الفهم.
animate (box ، `translate (-$ {itemwidth*num} px ، 0)` ، 1000 ، function () {box.style.transitionDuration = '' ؛ box.style.transform = `translate (-$ {itemwidth*(item.length-2)} px ، 0)` flag =}) ؛هل هي بديهية للغاية ومريحة؟ من الأمثلة البسيطة أعلاه ، من الواضح أنه في ES6 ، يتم تمييز السلاسل مع backticks (``) ، والتي يجب أن تكون معروفة.
هناك ميزة أخرى. يمكن لسلسلة القالب إخراج سلسلة مطوية ، وهو أمر مستحيل في سلاسل ES5 التقليدية. يجب استخدامه (/n) ولا يمكن كتابته للدخول إلى عودة النقل عند الكتابة. ومع ذلك ، في قالب سلسلة ES6 ، يمكن كتابته للدخول والمساحة مباشرة ، ثم الإخراج مباشرة عند إخراج السلسلة ، وهو مريح للغاية.
دع myString = `abcdeffff fas` ؛ console.log (mystring) ؛/*output abcdeffff fas*/
تمديد الوظائف
1. تعيين القيم الافتراضية للدالة
في امتداد الوظيفة ، تتم إضافة وظيفة لتعيين القيم الافتراضية للوظيفة ، والتي يمكن قولها أنها جيدة جدًا. هل تتذكر كيف نضع القيم الافتراضية للوظائف في ES5؟
اختبار الوظيفة (a ، b ، c) {var a = a || 10 ؛ var a = b || 15 ؛ var c = c || 20 ؛ console.log (A+B+C) ؛}هنا قمنا بتعيين القيمة الافتراضية لتحقيق تأثيرنا المتوقع حتى يوم واحد ، نمرر = 0 في. في هذا الوقت ، من الخطأ بالنسبة لنا أن نكتب بهذه الطريقة. بالنسبة للبرنامج ، 0 خاطئة ، لذا فإن A سوف تأخذ القيمة الافتراضية 10 ، وبالتالي فشلت في تحقيق التأثير المتوقع. لكن ES6 يوفر لنا طريقة جيدة جدًا لوضع القيم الافتراضية. يمكن إعادة كتابة الرمز أعلاه على النحو التالي:
اختبار الوظيفة (a = 10 ، b = 15 ، c = 20) {console.log (a+b+c) ؛}2. وظيفة السهم
يجب أن يكون الطلاب الذين يفهمون Cofficscript واضحًا أن قوة Coffourscript هي وظيفة السهم في كل مكان ، وهي ممتعة للغاية للكتابة. الآن ، قدمت ES6 رسميًا وظيفة السهم ، بحيث يمكن تبسيط برنامجنا ، على سبيل المثال:
// طريقة الكتابة لـ es5 var test = function (a ، b) {return a+b ؛} // وظيفة السهم لـ es6 var test2 = test (a ، b) => a+b ؛عند كتابة carousels ، تحتاج إلى نقل الماوس إلى النقاط الصغيرة التالية في كائن الصفيف من النقاط الصغيرة ، بحيث يمكن للرسم البياني الانتقال إلى الموضع الصحيح. في ES5 ، نحتاج إلى إضافة سمات إلى الكائن الحالي ، وهو أكثر تعقيدًا للكتابة ، وطريقة الكتابة هي كما يلي:
var lilist = document.queryselectorall ('li') ؛ for (var i = 0 ؛ i <lilist.length ؛ i ++) {lilist [i] .index = i ؛ lilist [i] .addeventListener ('mouseenter' ، function () {console.log (this.index) ؛} ، false) ؛}هذه السمة. ولكن في ES6 ، يمكننا استخدام وظيفة السهم مباشرةً و FindIndex تم تقديمها حديثًا في الصفيف للعثور على فهرس العنصر النشط الحالي. الرمز كما يلي:
دع lilist = document.queryselectorall ('li') ؛ دع arraylilist = array.form (lilist) ؛ for (var i = 0 ؛ i <lilist.length ؛ i ++) {lilist [i] .index = i ؛ lilist [i] .addeventListener ('mouseenter' ، function () {let thisIndex = arraylilist.findIndex ((n) => n == this) ؛} ، false) ؛}ThisIndex الذي تم الحصول عليه بواسطة الرمز أعلاه هو الفهرس الموضوعة على الماوس الحالي. هنا أفهم المعلمة n في وظيفة السهم. بعد المرور في المعلمة n ، سوف يعبر الكائن في الصفيف ، وذلك لإيجاد الكائن مساويًا لهذا ، ثم إعادة فهرسه. Array.from () يستخدم هنا. هذه طريقة جديدة تم إضافتها إلى الصفيف في ES6 ، والتي يمكنها تحويل صفيف الفئة إلى صفيف.
ES6 ل ... من الحلقة
يمكن استبدال حلقة رمز JS أعلاه ، ولكن في الواقع ، يمكن استبدالها بـ for ... من الحلقة في ES6 ، مما يجعل الكتابة أكثر إيجازًا. هل تتذكر لـ ... في حلقة في JS. يمكن لهذه الحلقة حلقة المفاتيح في أزواج القيمة الرئيسية ، ولكن لا يمكنها حلقة القيم. ظهور ... من هو التعويض عن أوجه القصور. تتضمن النطاقات التي يمكن استخدامها من قبل ... من الحلقة المصفوفات ، وهي هياكل تعيين وخريطة ، وبعض الكائنات التي تشبه الصفيف (مثل كائنات الوسائط ، وكائنات Nodelist DOM) ، وكائنات المولد ، والسلاسل. حتى نتمكن من استخدام هذه الحلقة لاستبدال الحلقة ، ولكن هنا يجب أن نلاحظ أنه إذا كنت تستخدم ... من الحلقة مباشرة ، سيتم الإبلاغ عن خطأ تحت Chrome49. أكد المسؤول أن هذا خطأ من Chrome49 وسيتم إصلاحه في Chrome51 . لذلك عندما كنت أكتب ، استخدمت Array.from () لتحويل الكائن Nodelist إلى صفيف ، حتى أتمكن من العمل بثقة. الرمز كما يلي:
اسمحوا lilist = document.queryselectorall ('li') ؛ دع arraylilist = array.form (lilist) ؛ لـ (اسمحوا li of lilist) {li.addeventListener ('mouseenter' ، function () {let thisIndex = Arraylilest.findIndex (n) => n == this) ؛}لخص
ما سبق هو كل محتوى هذه المقالة. أليس هذا موجزًا جدًا؟ من خلال هذه المقالة ، أشعر أن هذه الأشياء فقط جعلتني أشعر بسحر ES6. آمل أن يكون من المفيد للجميع أن يتعلموا ES6.