ما هو ES6 وما يحتاج مبرمجو جافا سكريبت إلى معرفته

يشير ES6 إلى الإصدار 6 من لغة برمجة ECMA Script. ECMA Script هو الاسم القياسي لجافا سكريبت ، والإصدار 6 هو الإصدار التالي بعد الإصدار 5 ، والذي تم إصداره في عام 2011. وهو تحسين رئيسي للغة JavaScript ، ويضيف العديد من الميزات التي تهدف إلى تسهيل تطوير البرامج على نطاق واسع .

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

---

---

دعونا الآن نلقي نظرة على بعض التغييرات الرئيسية التي يجلبها ES6 إلى JavaScript.

1. الثوابت

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

const JOE = 4.0
JOE= 3.5
// results in: Uncaught TypeError: Assignment to constant variable.


يمكنك استخدام الثابت أينما يمكنك استخدام متغير ( أين ).

console.log('Value is: ' + joe * 2)
// prints: 8


2. المتغيرات والوظائف ذات النطاق الكتلي

مرحبًا بكم في القرن الحادي والعشرين ، جافا سكريبت! مع ES6 ، المتغيرات المعلنة باستخدام يترك (والثوابت الموضحة أعلاه) اتبع قواعد تحديد نطاق الكتلة تمامًا كما هو الحال في Java و C ++ وما إلى ذلك (لمعرفة المزيد ، راجع كيفية إعلان المتغيرات في JavaScript.)

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

---

---

المتغيرات تحتفظ بالقيمة حتى نهاية الكتلة. بعد الكتلة ، يتم استعادة القيمة الموجودة في الكتلة الخارجية (إن وجدت).

تشغيل الموسيقى من هاتف إلى آخر

{
let x = 'hello';
{
let x = 'world';
console.log('inner block, x = ' + x);
}
console.log('outer block, x = ' + x);
}
// prints
inner block, x = world
outer block, x = hello


يمكنك إعادة تعريف الثوابت أيضًا ضمن هذه الكتل.

---

---

{
let x = 'hello';
{
const x = 4.0;
console.log('inner block, x = ' + x);
try {
x = 3.5
} catch(err) {
console.error('inner block: ' + err);
}
}
x = 'world';
console.log('outer block, x = ' + x);
}
// prints
inner block, x = 4
inner block: TypeError: Assignment to constant variable.
outer block, x = world


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

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

var x = a => a + 1;
x(4) // returns 5


باستخدام بناء الجملة هذا ، يمكنك تعريف وتمرير الوسائط في الوظائف بسهولة.

باستخدام مع أ لكل () :

[1, 2, 3, 4].forEach(a => console.log(a + ' => ' + a*a))
// prints
1 => 1
2 => 4
3 => 9
4 => 16


تحديد دالات تقبل وسيطات متعددة بإحاطةهم بأقواس:

[22, 98, 3, 44, 67].sort((a, b) => a - b)
// returns
[3, 22, 44, 67, 98]


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

يمكن الآن الإعلان عن معلمات الوظيفة بالقيم الافتراضية. في التالي، x هي دالة ذات معلمتين إلى و ب . المعلمة الثانية ب يتم إعطاء القيمة الافتراضية 1 .

var x = (a, b = 1) => a * b
x(2)
// returns 2
x(2, 2)
// returns 4


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

var x = (a = 2, b) => { return a * b }


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

x(2)
// returns NaN
x(1, 3)
// returns 3


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

x(undefined, 3)
// returns 6


5. معلمات وظيفة الراحة

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

var x = function(a, b, ...args) { console.log('a = ' + a + ', b = ' + b + ', ' + args.length + ' args left'); }
x(2, 3)
// prints
a = 2, b = 3, 0 args left
x(2, 3, 4, 5)
// prints
a = 2, b = 3, 2 args left


6. سلسلة القوالب

يشير قولبة السلسلة إلى استيفاء المتغيرات والتعبيرات في سلاسل باستخدام صيغة مثل perl أو shell. يتم تضمين قالب السلسلة في أحرف التجزئة الخلفية ( ' ). على النقيض من الاقتباسات الفردية ( ' ) أو علامات الاقتباس المزدوجة ( ' ) تشير إلى السلاسل العادية. يتم تمييز التعبيرات داخل القالب بين $ { و } . هنا مثال:

var name = 'joe';
var x = `hello ${name}`
// returns 'hello joe'


بالطبع ، يمكنك استخدام تعبير تعسفي للتقييم.

// define an arrow function
var f = a => a * 4
// set a parameter value
var v = 5
// and evaluate the function within the string template
var x = `hello ${f(v)}`
// returns 'hello 20'


يمكن أيضًا استخدام بناء الجملة هذا لتعريف السلاسل لتحديد السلاسل متعددة الأسطر.

var x = `hello world
next line`
// returns
hello world
next line


7. خصائص الكائن

ES6 يجلب بناء جملة مبسط لإنشاء كائن. ألق نظرة على المثال أدناه:

var x = 'hello world', y = 25
var a = { x, y }
// is equivalent to the ES5:
{x: x, y: y}


أسماء الخصائص المحسوبة أنيقة جدًا أيضًا. مع ES5 والإصدارات الأقدم ، لتعيين خاصية كائن باسم محسوب ، كان عليك القيام بذلك:

var x = 'hello world', y = 25
var a = {x: x, y: y}
a['joe' + y] = 4
// a is now:
{x: 'hello world', y: 25, joe25: 4}


الآن يمكنك القيام بكل ذلك في تعريف واحد:

var a = {x, y, ['joe' + y]: 4}
// returns
{x: 'hello world', y: 25, joe25: 4}


وبالطبع ، لتحديد العمليات ، يمكنك فقط تعريفها بالاسم:

var a = {x, y, ['joe' + y]: 4, foo(v) { return v + 4 }}
a.foo(2)
// returns
6


8. صياغة تعريف الفئة الرسمية

تعريف الفئة

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

class Circle {
constructor(radius) {
this.radius = radius
}
}
// use it
var c = new Circle(4)
// returns: Circle {radius: 4}


طرق التصريح

تحديد طريقة بسيطة للغاية أيضًا. لا توجد مفاجآت هناك.

class Circle {
constructor(radius) {
this.radius = radius
}
computeArea() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
c.computeArea()
// returns: 50.26548245743669


حاصلون وخطابات

لدينا الآن معلمات ومحددات أيضًا ، مع تحديث بسيط لبناء الجملة. دعونا نعيد تعريف دائرة فئة مع منطقة خاصية.

class Circle {
constructor(radius) {
this.radius = radius
}
get area() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
// returns: Circle {radius: 4}
c.area
// returns: 50.26548245743669


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

هنا هو الفصل المعاد تعريفه:

class Circle {
constructor(radius) {
this._radius = radius
}
get area() { return Math.PI * this._radius * this._radius }
set radius(r) { this._radius = r }
}
var c = new Circle(4)
// returns: Circle {_radius: 4}
c.area
// returns: 50.26548245743669
c.radius = 6
c.area
// returns: 113.09733552923255


الكل في الكل ، هذه إضافة لطيفة إلى JavaScript الموجهة للكائنات.

ميراث

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

class Ellipse {
constructor(width, height) {
this._width = width;
this._height = height;
}
get area() { return Math.PI * this._width * this._height; }
set width(w) { this._width = w; }
set height(h) { this._height = h; }
}
class Circle extends Ellipse {
constructor(radius) {
super(radius, radius);
}
set radius(r) { super.width = r; super.height = r; }
}
// create a circle
var c = new Circle(4)
// returns: Circle {_width: 4, _height: 4}
c.radius = 2
// c is now: Circle {_width: 2, _height: 2}
c.area
// returns: 12.566370614359172
c.radius = 5
c.area
// returns: 78.53981633974483


وكانت هذه مقدمة قصيرة لبعض ميزات JavaScript ES6.

التالي: التعرف على بعض طرق مصفوفة JavaScript المهمة وبرمجة رسوم متحركة روبوتية حساسة للصوت! تعرف أيضًا على إطار عمل رائع للواجهة الأمامية يسمى Vue.

حقوق الصورة: micrologia / الإيداع

يشارك يشارك سقسقة بريد الالكتروني مقارنة بين Canon و Nikon: ما هي ماركة الكاميرا الأفضل؟

Canon و Nikon هما أكبر اسمين في صناعة الكاميرات. ولكن ما هي العلامة التجارية التي تقدم أفضل تشكيلة من الكاميرات والعدسات؟

كيفية تنزيل مقاطع فيديو youtube مجانًا

اقرأ التالي مواضيع ذات صلة

• برمجة
• جافا سكريبت

نبذة عن الكاتب جاي سريدهار(تم نشر 17 مقالة) المزيد من Jay Sridhar

اشترك في نشرتنا الإخبارية

انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!

انقر هنا للاشتراك