دعونا نشرح بسرعة ES6 بالتفصيل ونتعرف على الميزات الجديدة!

ستمنحك هذه المقالة فهمًا متعمقًا لـ ES6 وتتعرف على الميزات الجديدة لـ ES6 وآمل أن تكون مفيدة لك!

مدخل الواجهة الأمامية (vue) إلى دورة الإتقان: أدخل التعلم

فهم ES6

ECMAScript هي脚本语言的标准化规范تم تطويرها بواسطة Netscape؛ وكانت تسمى في الأصل Mocha ، ثم أعيدت تسميتها لاحقًا بـ LiveScript ، ثم أعيدت تسميتها أخيرًا JavaScript
يضيف ECMAScript 2015 (ES2015)، الإصدار 6، المعروف في الأصل باسم ECMAScript 6 ( ES6 )، ميزات جديدة.

السماح لنطاق الكتلة ES6

أولا ما هو النطاق؟ النطاق يعني ببساطة الإعلان عن متغير. النطاق الصحيح لهذا المتغير هو قبل let يأتي. يحتوي Node.js فقط على全局作用域函数作用域لـ var ، بينما يوفر ES6块级作用域إلى js.

 {
var a = "؟";
دع ب = "⛳";
}
console.log(a);
console.log(b);

 ؟
خطأ مرجعي لم يتم اكتشافه: لم يتم تعريف b

كما ترون، نستخدم الكلمة الأساسية var لتحديد المتغير a في الكتلة. في الواقع، يمكن الوصول إليه عالميًا، لذلك فإن var声明的变量是全局的، لكننا نريد أن يصبح المتغير ساريًا في الكتلة تم الوصول إليه بعد مغادرة الكتلة، لا a is not defined إذًا يمكنك استخدام الكلمة الأساسية الجديدة للنطاق على مستوى الكتلة في ES6 let عن المتغير a.

ES6 مجموعة التدمير

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

 وظيفة الإفطار () {
يعود ['؟'، '؟'، '؟']؛
}
فار درجة الحرارة = الإفطار();
console.log(temp[0], temp[1], temp[2]);

دع [أ، ب، ج] = الإفطار()؛
console.log(a, b, c);

 ؟
؟

ES6 تدمير الكائنات

أولاً، تقوم دالة breakfast بإرجاع对象. استخدم解构对象لتعريف الكائن. يمثل المفتاح الموجود في زوج القيمة الرئيسية اسم المفتاح للكائن الفعلي المعين، والقيمة هي المتغير المخصص سيتم إكماله تلقائيًا ثم يتم استدعاء وظيفة الإفطار لإرجاع الكائن ثم طباعة المتغيرات a وb وc ويمكنك أن ترى أنه لا توجد مشكلة

 وظيفة الإفطار () {
إرجاع {أ: '؟"، ب: '؟"، ج: '؟" }
}
دع { أ: أ، ب: ب، ج: ج } = الإفطار ()؛
console.log(a, b, c);

 ؟

سلاسل قالب ES6

قبل استخدام سلسلة القالب، نقوم بتسلسل متغيرات السلسلة باستخدام +

استخدم سلسلة القالب المقدمة من ES6 أولاً استخدم `` لتغليف السلسلة. عندما تريد استخدام المتغيرات، استخدم ${变量}

 دع = '؟"،
ب = '?️';

Let c = "تناول الطعام اليوم" + a + "انظر بعد الأكل" + b؛
console.log(c);

Let d = `تناول ${a} اليوم وشاهد بعد تناول ${b}`;
console.log(d);

 أكل اليوم؟ دعونا نرى بعد الأكل؟️
أكل اليوم؟ دعونا نرى بعد الأكل؟️

يحدد ES6 ما إذا كانت السلسلة تحتوي على سلاسل أخرى

باستخدام هذه الوظائف، يمكنك بسهولة إكمال العمليات مثل ما إذا كانت السلسلة تبدأ بشيء ما، وما إذا كانت السلسلة تنتهي بشيء ما، وما إذا كانت تحتوي على أي سلسلة.

 Let str = 'مرحبًا، أنا شياو تشو ❤️';
console.log(str.startsWith('Hello'));
console.log(str.endsWith('❤️'));
console.log(str.endsWith('Hello'));
console.log(str.includes(" "));

 حقيقي
حقيقي
خطأ شنيع
حقيقي

المعلمات الافتراضية ES6

في ES6، يمكنك استخدام المعلمات الافتراضية عند استدعاء دالة، إذا لم يتم تعيين قيمة للمعلمة، فسيتم تنفيذها باستخدام المعلمات الافتراضية المعينة القيمة، والكتابة فوق القيمة الافتراضية استخدم ما يلي:

 وظيفة القول (شارع) {
console.log(str);
}
وظيفة say1(str = 'مرحبًا') {
console.log(str);
}
يقول()؛
say1();
say1('❤️');

 غير محدد
مهلا مهلا❤️

مشغل انتشار ES6

استخدم ... لتوسيع العناصر لسهولة التشغيل استخدم كما يلي:

 Let arr = ['❤️', '?', '?'];
console.log(arr);
console.log(...arr);
Let brr = ['Prince', ...arr];
console.log(brr);
console.log(...brr);

 ['❤️'، '؟"، '؟" ]
❤️ ؟
[ "الأمير"، "❤️"، "؟"، "؟" ]
الأمير ❤️ ؟

مشغل الباقي ES6

يتم استخدام عامل ... على معلمات الوظيفة ويستقبل مجموعة من المعلمات ويتم استخدامه على النحو التالي:

 الدالة f1(أ، ب، ...ج) {
console.log(a, b, c);
console.log(a, b, ...c);
}
f1('?','?','☃️','㊙️');

 ?
?

اسم الدالة ES6

يمكنك استخدام .name للحصول على اسم الوظيفة. الاستخدام المحدد هو كما يلي:

 الدالة f1() { }
console.log(f1.name);
دع f2 = الوظيفة () { };
console.log(f2.name);
دع f3 = الوظيفة f4() { };
console.log(f3.name);

 f1
f2
f4

وظائف السهم ES6

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

 دع f1 = أ => أ؛

دع f2 = (أ، ب) => {
العودة أ + ب؛
}

console.log(f1(10));
console.log(f2(10, 10));

 10
20

تعبيرات الكائنات ES6

باستخدام تعبير كائن es6، إذا كانت سمة الكائن هي نفس القيمة، فيمكن حذف القيمة، ويمكن حذف function عند كتابة الوظيفة، ويكون الاستخدام كما يلي:

 دع a = '㊙️';
دع ب = '☃️';

كائن ثابت = {
أ: أ،
ب: ب،
قل: الوظيفة () {

}
}

كونست es6obj = {
أ،
ب،
يقول() {

}
}

console.log(obj);
console.log(es6obj);

 { أ: '㊙️'، ب: '☃️'، قل: [الوظيفة: قل] }
{ أ: '㊙️'، ب: '☃️'، قل: [الوظيفة: قل] }

ثوابت ES6

استخدم الكلمة الأساسية const لتعريف القياس. const يحد من إجراء تعيين القيم للقياس، لكنه لا يحد من القيمة في القياس. استخدم ما يلي:

 const app = ['☃️', '?'];
console.log(...app);
app.push('?');
console.log(...app);
التطبيق = 10؛

يمكنك أن ترى أنه عند تعيين قيمة للقياس مرة أخرى، يتم الإبلاغ عن خطأ.

 ☃️؟
☃️؟
التطبيق = 10؛
^
TypeError: التنازل إلى متغير ثابت.

اسم خاصية الكائن ES6

عند استخدام النقاط لتحديد سمات الكائن، إذا كان اسم السمة يحتوي على أحرف مسافات، فهذا غير قانوني ولا يمكن تمرير بناء الجملة. يمكن أن يؤدي استخدام [属性名] إلى حل المشكلة تمامًا، ولا يمكن كتابة اسم السمة مباشرة فحسب، بل أيضًا يمكن تحديدها باستخدام المتغيرات. الاستخدام المحدد هو كما يلي:

 دع obj = {};
Let a = 'اسم صغير'؛
obj.name = 'الأمير';
// من غير القانوني استخدام النقاط لتحديد السمات ذات المسافات في المنتصف // obj.little name = 'Little Prince';
obj[a] = 'الأمير الصغير';
console.log(obj);

 { الاسم: "الأمير"، "الاسم الصغير": "الأمير الصغير" }

يحدد ES6 ما إذا كانت القيمتان متساويتان

نتائج مقارنة بعض القيم الخاصة باستخدام === أو == قد لا تلبي احتياجاتك، يمكنك استخدام Object.is(第一个值，第二个值) للحكم، وقد تضحك

 console.log(NaN == NaN);
console.log(+0 == -0);
console.log(Object.is(NaN, NaN));
console.log(Object.is(+0, -0));

 خطأ شنيع
حقيقي
حقيقي
خطأ شنيع

ES6 نسخ الكائنات

استخدم Object.assign() لنسخ كائن إلى كائن آخر، كما يلي:

 دع obj = {};
كائن.تعيين (
// مصدر الكائن،
// انسخ الكائن المستهدف { أ: '☃️' }
);
console.log(obj);

 { أ: '☃️' }

ES6 قم بتعيين النموذج الأولي للكائن

يمكنك استخدام es6 لتعيين النموذج الأولي للكائن كما يلي:

 دع obj1 = {
يحصل() {
العودة 1؛
}
}
دع obj2 = {
ج: 10،
يحصل() {
العودة 2؛
}
}
دع الاختبار = Object.create(obj1);
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj1);
Object.setPrototypeOf(test, obj2);
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj2);

 1
حقيقي
2
حقيقي

النموذج الأولي ES6

 دع obj1 = {
يحصل() {
العودة 1؛
}
}
دع obj2 = {
ج: 10،
يحصل() {
العودة 2؛
}
}
دع الاختبار = {
__بروتو__:obj1
}
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj1);
test.__proto__ = obj2;
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj2);

 1
حقيقي
2
حقيقي

اي اس 6 سوبر

 دع obj1 = {
يحصل() {
العودة 1؛
}
}
دع الاختبار = {
__بروتو__: obj1،
يحصل() {
إرجاع super.get() + ' ☃️';
}
}
console.log(test.get());

 1☃️

ES6 يقوم بإنشاء مكرر

قبل أن تتعلم، اكتب مكررًا أولاً

 وظيفة يموت (آر) {
دعني = 0؛

يعود {
التالي() {
اتركه = (i >= arr.length);
Let value = !done ? arr[i++] : غير محدد;

يعود {
القيمة: القيمة،
تم : تم
}
}
}
}
Let arr = ['☃️', '?', '?'];

دع dieArr = die(arr);
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next());

 { القيمة: '☃️'، تم: خطأ }
{ القيمة: '؟'، تم: خطأ }
{ القيمة: '؟'، تم: خطأ }
{ القيمة: غير محددة، تم: صحيح }

حسنًا، دعونا نلقي نظرة على المولد المبسط

 وظيفة * يموت (آر) {
for (let i = 0; i < arr.length; i++) {
العائد آر[i];
}
}
Let test = die(['?','☃️']);
console.log(test.next());
console.log(test.next());
console.log(test.next());

 { القيمة: '؟'، تم: خطأ }
{ القيمة: '☃️'، تم: خطأ }
{ القيمة: غير محددة، تم: صحيح }

فئات ES6

استخدم es6 لبناء الفصول بسرعة وسهولة، رائع

 فئة ستو {
منشئ (الاسم) {
this.name = name;
}
يقول() {
إرجاع this.name + "قل أوري"؛
}
}
Let xiaoming = new stu("小明");
console.log(xiaoming.say());

 وقال شياو مينغ أوري أعطى

ES6 استعد

تحديد طرق الحصول على/تعيين للحصول على سمات الفئة أو تعديلها

 فئة ستو {
منشئ (الاسم) {
this.name = name;
}
يحصل() {
إرجاع هذا. الاسم؛
}
مجموعة (newStr) {
this.name = newStr;
}
}
Let xiaoming = new stu("小明");
console.log(xiaoming.get());
xiaoming.set("دامينغ")
console.log(xiaoming.get());

 شياو مينغ ودا مينغ

ES6 ثابت

يمكن استخدام الأساليب المعدلة باستخدام الكلمة الأساسية الثابتة مباشرة دون إنشاء مثيل للكائن.

 فئة ستو {
قول ثابت (شارع) {
console.log(str);
}
}
stu.say("الطريقة الثابتة الأصلية");

 طريقة أصلية ثابتة

يمتد ES6

يمكن أن يؤدي استخدام الوراثة إلى تقليل تكرار التعليمات البرمجية، مثل:

 شخص من الدرجة {
منشئ (الاسم، بير) {
this.name = name;
this.bir = بير;
}
شوينفو () {
إرجاع "الاسم:" + this.name + "عيد الميلاد:" + this.bir؛
}
}
الفئة أ تمتد الشخص {
منشئ (الاسم، بير) {
سوبر (الاسم، بير)؛
}
}
Let zhouql = new A("Zhou Qiluo", "2002-06-01");
// Zhou Qiluo نفسه ليس لديه طريقة showInfo، فهو موروث من وحدة التحكم الخاصة بالشخص (zhouql.showInfo());

 الاسم: تشو تشيلو تاريخ الميلاد: 01/06/2002

مجموعة ES6

مجموعة المجموعة، على عكس المصفوفات، لا تسمح بالعناصر المكررة في مجموعة المجموعة

 // أنشئ مجموعة مجموعة Let food = new Set('??');
// أضف بشكل متكرر، يمكن إدخال واحد فقط في food.add('?');
food.add('?');

console.log(food);
// حجم المجموعة الحالي console.log(food.size);
// تحديد ما إذا كان العنصر موجودًا في المجموعة console.log(food.has('?'));
// حذف عنصر في المجموعة food.delete('?');
console.log(food);
// قم بالتكرار عبر المجموعة food.forEach(f => {
console.log(f);
});
// امسح المجموعة food.clear();
console.log(food);

 مجموعة (3) { '؟"، '؟"، '؟" }
3
حقيقي
مجموعة(2) {'؟"، '؟" }
؟
؟
مجموعة (0) {}

خريطة ES6

يتم دمج الخريطة لتخزين أزواج القيمة الرئيسية

 دع الطعام = خريطة جديدة ()؛
دع أ = {}، ب = الوظيفة () { }، ج = "الاسم"؛

food.set(a, '?');
food.set(b, '?');
food.set(b, '?');
food.set(c, 'أرز');

console.log(food);
console.log(food.size);
console.log(food.get(a));
food.delete(c);
console.log(food);
console.log(food.has(a));

food.forEach((v, k) => {
console.log(`${k} + ${v}`);
});
food.clear();
console.log(food);

 الخريطة(3) { {} => '?', [الوظيفة: ب] => '?', 'اسم' => 'أرز' }
3
؟
الخريطة(2) { {} => '؟"، [الوظيفة: ب] => '؟" }
حقيقي
[كائن كائن] +؟
الدالة () { } + ؟
الخريطة(0) {}

ES6 نمطية

باستخدام التطوير المعياري، يمكن لـ es6 بسهولة استيراد وتصدير بعض المحتوى، بالإضافة إلى التصدير الافتراضي وتفاصيل أخرى.

 دع = '؟"؛
دع f1 = الوظيفة (str = "المعلمات الخاصة بك") {
console.log(str);
}
تصدير {أ، f1}؛

 استيراد {a, f1} من './27moduletest.js'؛
console.log(a);
f1();
f1('فهمت ذلك');