▷ما هو جافا سكريبت ES6 ، وكيف تختلف؟ ✅

تدعم جافا سكريبت معظم الويب التفاعلي ، لذا كان عليها أن تتطور جنبًا إلى جنب معها. يتم إضافة ميزات جديدة في JavaScript كل عام الآن ؛ سنلقي نظرة على ما هو جديد وكيف تستخدم ES6 JavaScript على موقع الويب الخاص بك.

جافا سكريبت لديه العديد من النكهات

أوراكل لديها علامة تجارية على المصطلح جافا سكريبت ، لذا فإن المعيار الفعلي الذي تطبقه جافا سكريبت الحديثة يسمى معيار ECMAScript ، أو ES. معيار جافا سكريبت الأساسي هو ECMAScript 5 ، أو ES5 ، الذي تم إصداره في عام 2009. هذا هو JavaScript الفانيلا بدون أي ميزات خاصة ، مدعومة في كل مكان ، حتى في IE 9.

ES6 هي مواصفات جديدة إلى حد ما ، تم إصدارها في عام 2015 ، وتدعم العديد من الميزات الجديدة. يطلق عليه تقنيًا ES2015 ، وكل إصدار سنوي بعد أن يتم تحديده بحلول عام إصداره. لكن الجميع يسميها ES6 على أي حال ، لذلك نحن متمسكون بذلك.

ES6 مهم ، على وجه الخصوص ، لأنه يمثل بداية إعادة تسوية JavaScript. في الوقت الحاضر ، تطرح ECMA معيارًا جديدًا سنويًا. لكن تم إصدار ES6 بعد 6 سنوات من ES5 ، أي بعد 10 سنوات من ES3 ، لذا فهو معلم رئيسي.

كيفية استخدام تركيب ES6

ES6 هو في الواقع مدعومة في الكثير من الأماكن، مع وجود المشكلة الرئيسية في Internet Explorer (كالمعتاد). لذا ، بينما قد تتمكن من البدء بالكتابة بنمط ES6 ، لا يمكنك التأكد من أن متصفح الجميع سيتصرف بنفس الطريقة.

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

إليك كيفية عملها: لديك بيئة التطوير الخاصة بك حيث تكتب ملفات. js. أنت حر في استخدام أي صيغة ترغب في استخدامها في ES6. بدلاً من تشغيلها مباشرةً ، تقوم بإعدادها حزمة الويب لتحميل ملفات JS بابل. غالبًا ، ستريد الركض خادم webpack-dev-server ، لذلك يحدث هذا تلقائيًا عند إجراء التغييرات.

الآن بدلاً من تحميل index.js ، يمكنك تحميل bundle.js ، الذي يحتوي على كل التعليمات البرمجية الخاصة بك. هذا له أيضًا فائدة كبيرة في السماح لك باستخدام وحدات NPM في JS ، على الرغم من أنه يمكن أن يجعل رمزك ضخمًا إذا أضفت الكثير (على الرغم من أن حزمة الويب رائعة جدًا في التصغير).

ما هو الجديد

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

بشكل عام ، إذا كان بإمكان Babel تجميع شيء ما وفقًا لمواصفات قديمة لـ JS ، فمن المحتمل أنه آمن للاستخدام في التطوير. إذا لم يحدث ذلك ، ولا تهتم لـ 3٪ من السكان الذين يستخدمون IE 11 ، فمن المحتمل أن تكون مدعومة في معظم المتصفحات بشرط ألا تكون ميزة جديدة فائقة.

وظائف السهم

بدلاً من الكتابة:

arr.map(function (d) {
   return d + 1;
 });

يمكنك بدلاً من ذلك استبدال الكلمة الرئيسية الوظيفية بسهم بعد الأقواس:

arr.map((d) => {
   return d + 1;
 });

بالإضافة إلى ذلك ، لا تحتاج إلى الأقواس إذا قمت بتمرير وسيطة واحدة فقط. ولا تحتاج إلى الأقواس وبيان الإرجاع إذا كنت تعرض قيمة واحدة فقط:

arr.map(d => d + 1);

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

إنشاء كائن ومصفوفة مبسطة مع التدمير

بدلاً من الكتابة:

var type = "123", color = "blue"
 var obj = { type: type, color: color }

يمكنك ببساطة حذف أسماء المفاتيح ، وسيتم تعيينها تلقائيًا على أسماء المتغيرات:

var obj = { type, color }

بالإضافة إلى ذلك ، يعمل هذا في الاتجاه المعاكس ، يسمى مهمة التدمير:

var { type, color } = obj

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

var { type, ...rest } = obj
 
 //rest == { color: "blue" }

كما أنها تعمل في الاتجاه المعاكس ، مما يؤدي إلى توسيع الصفيف وتسطيحه:

var arr1 = ("a", "b"), arr2 = ("c", "d")
 var flat = (...a, ...b, "e")
 
 //flat = ("a", "b", "c", "d", "e")

هناك أكثر من التدمير من ما هو مشمول هنا.

الطبقات

جافا سكريبت لديها فئات الآن. إليك كيف تعمل من مستندات موزيلا:

class Rectangle {
   constructor(height, width) {
     this.height = height;
     this.width = width;
   }
   // Getter
   get area() {
     return this.calcArea();
   }
   // Method
   calcArea() {
     return this.height * this.width;
   }
 }
 
 const square = new Rectangle(10, 10);
 
 console.log(square.area); // 100

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

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

التغييرات على وسيطات الدوال

يقدم ES6 طريقتين جديدتين لكتابة معلمات الدوال. أولاً ، يمكن تحديد المعلمات الافتراضية عن طريق تعيين قيمة في تعريف الوظيفة:

var func = (a, b = "default") => {  }

إذا كنت ستستدعي func دون تحديد وسيطتين ، فستفترض القيمة الافتراضية.

أيضا ، يمكن الآن إعطاء الدالات عدد غير محدود من الوسائط كصفيف ، يسمى بقية معلمات دالة:

var func = (a, b, c, ...rest) => {  }

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

دعونا وثابت

الأمر let هو بديل لـ var الذي يمنح على وجه التحديد نطاق الكتلة. إليك كيفية عمل المتغيرات في JS بشكل طبيعي:

var x = 0; //global variable
 
 function someFunc() {
   
   var y = 3; //local variable
 
 }

يمكن استخدام المتغير العام في الدالة ، ولكن لا يمكن استخدام متغير الوظيفة المحلية خارج الدالة. هذا ما يسمح لك بتسمية متغيراتك "i" و "tmp" و "x" و "count" طوال الوقت والابتعاد عنها.

يختلف نطاق الحظر ، ويسمح لك بإعادة تعريف المتغيرات باستخدام الكتل المتداخلة:

var x = 0
 
 {
   let x = 2
     //x == 2
 }
 // x == 0 again

يتيح لك تركيبة let بشكل أساسي تعديل محتويات x داخل هذه الكتلة (سواء كانت وظيفة أو كتلة التقاط أو كتلة صريحة مثل ذلك) ، وإعادة ضبطها عند مغادرة الكتلة. هذا مفيد بشكل خاص لمتغيرات "العد" المؤقتة ، حيث سيكون لكل كتلة نطاق مختلف. النطاق موروث للكتل الفرعية ، ولكن يمكن تداخله وتغييره مرة أخرى.

بناء الجملة الثابت واضح إلى حد ما. استبدل var بـ const ، والمتغير الخاص بك الآن للقراءة فقط. إذا حاولت الكتابة إليها ، فسوف ترمي:

Uncaught TypeError: Assignment to constant variable.

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

ما هو جافا سكريبت ES6 ، وكيف تختلف؟