تم دعم إصدار ES6 من JS على نطاق واسع من قبل المتصفحات الرئيسية ، وقد استخدمت العديد من الأطر الأمامية أيضًا ES6 ، ويمكن استخدام Babel للتوافق ، لذلك دخل ES6 مرحلة التطبيق.
إذا لم تكن على دراية بـ ES6 ، فإليك 4 استخدامات أساسية بسيطة يمكن أن تساعدك على فهم ES6 بسرعة
1. إعلان المتغيرات باستخدام Let and const
في رمز ES5 التقليدي ، هناك مشكلتان رئيسيتان في الإعلانات المتغيرة
(1) عدم وجود دعم لنطاق الكتلة
(2) لا يمكن إعلان الثوابت
في ES6 ، تم حل هاتين المشكلتين ، مضيفًا كلمات رئيسية جديدة: Let and const
استخدم Let for Block Scope
var a = 1 ؛ if (true) {var b = 2 ؛} console.log (a) ؛ // 1console.log (b) ؛ // 2في ES5 ، يمكن الوصول إلى المتغير B الذي تم إعلانه في الكتلة IF خارج الكتلة.
// في es6let a = 1 ؛ if (true) {let b = 2 ؛} console.log (a) ؛ // 1console.log (b) ؛ // ReferenceRor: B غير محددفي ES6 ، تم الإعلان عن متغير B باستخدام Let Inf إذا كان لا يمكن الوصول إلى الكتلة خارج الكتلة
الرمز التالي هو وضع مربك شائع
var a = [] ؛ for (var i = 0 ؛ i <5 ؛ i ++) {a.push (function () {console.log (i) ؛}) ؛} a.foreach (function (value) {value () ؛}) ؛نتائج المدى هي: 5 ، 5 ، 5 ، 5 ، 5
استخدم Let to Enlare ariable I in Loop
var b = [] ؛ لـ (دع i = 0 ؛ i <5 ؛ i ++) {b.push (function () {console.log (i) ؛}) ؛} b.foreach (function (value) {value () ؛}) ؛نتائج التشغيل هي: 0 ، 1 ، 2 ، 3 ، 4
تحديد الثوابت باستخدام const
// في es5var my_constant = true ؛ my_constant = false ؛
لا يمكن تحديد الثوابت في ES5 ، ويمكن تغيير القيم ، ولا يمكننا إلا أن نضمن لهم أنفسنا.
// في es6const my_constant = true ؛ my_constant = false ؛ // uniticed typeerror: تعيين متغير ثابت
لا يمكن تغيير Const في ES6
2. سلسلة القالب
الطريقة التالية لربط السلاسل والمتغيرات أكثر شيوعًا
var url = 'http: // www.' + المجال + '.com/' + path + '؟' + QueryParams ؛
يوفر ES6 استخدامًا موجزًا
دع url = `http: //www.$ {domain} .com/$ {path}؟ $ {QueryParams}` ؛
3. مجموعة جديدة وخريطة كائنات خريطة
في ES5 ، غالبًا ما نستخدم المصفوفات لتخزين البيانات الديناميكية ، على سبيل المثال
var collection = [] ؛ collection.push (1 ، 2 ، 1) ؛ console.log (collection) ؛ // [1 ، 2 ، 1]
أنه يحتوي على بيانات مكررة. إذا كنت لا تريد بيانات مكررة ، فأنت بحاجة إلى استخدام الكود للحكم عليها.
الدالة addToCollection (المجموعة ، القيمة) {if (collection.indexof (value) <0) {collection.push (value)}}يوفر ES6 كائنات محددة ، مما يجعلها أكثر ملاءمة للتعامل مع هذا الموقف.
دع collection = new set () ؛ collection.add (1) ؛ collection.add (2) ؛ collection.add (1) ؛ console.log (collection) ؛ // set {1 ، 2}يمكن أن تعبر المجموعة أيضًا المجموعة ومعالجة البيانات الموجودة في المجموعة.
عادةً ما يتم استخدام ES5 لتخزين بيانات الزوج ذات القيمة الرئيسية ، على سبيل المثال
var collection = {} ؛ collection.a = 'abc' ؛ collection.b = 'xyz' ؛ES6 لديه خريطة ، بحيث يمكن استخدامها
دع collection = new map () ؛ collection.set ('a' ، 'abc') ؛ collection.set ('b' ، 'xyz') ؛اجتياز التبادل بسيط للغاية
collection.foreach (function (value ، key) {console.log (key + ":" + value) ؛}) ؛ console.log (collection.size) ؛4. معلمات الوظيفة
هناك ميزتان جديدتان لمعلمات الوظائف في ES6
القيمة الافتراضية
وظيفة dosomething (someObject) {console.log (someObject) ؛}قد يكون هناك خطأ في وقت التشغيل هنا ويجب التحقق من المعلمات.
وظيفة dosomething (someObject) {if (someObject === undefined) {someObject = {} ؛ } console.log (SomeObject) ؛}هذا النوع من رمز التحقق شائع جدا. يمكنك تعيين القيم الافتراضية للمعلمات في ES6 ، وهو أبسط بكثير.
دالة dosomething (someObject = {}) {console.log (someObject) ؛}تدمير الكائن
غالبًا ما نقوم بتمرير كائن يحتوي على أزواج القيمة الرئيسية كمعلمات إلى دالة ، ثم الحصول على خصائص مختلفة للكائن داخل الوظيفة
وظيفة dosomething (someObject) {var one = someObject.propone ؛ console.log (واحد) ؛ var two = someObject.proptwo ؛ console.log (اثنان) ؛ var three = someObject.propthree ؛ console.log (ثلاثة) ؛}يسمح لنا ES6 بتفكيك معلمات الكائن مباشرة في المعلمات
وظيفة dosomething ({Profone ، proptwo ، propthree}) {console.log (propone) ؛ console.log (proptwo) ؛ console.log (propthree) ؛}ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.