ملخص لجميع الميزات الجديدة في JavaScript ECMAScript 6

لقد مرت ثماني سنوات منذ أن أطلق ECMAScript رسميًا ES6 في عام 2015. منذ عام 2015، سيتم إصدار إصدار جديد في يونيو من كل عام، مع الإشارة إلى العام في ذلك الوقت كرقم الإصدار.

وقد ظهرت العديد من الميزات الجديدة في هذه الإصدارات العديدة، ولتسهيل الذاكرة، قمت بتنظيم جميع الميزات الجديدة في هذه المقالة.

ملاحظة: بعض المعلومات تقول أن جميع الإصدارات بعد ES2015 تسمى مجتمعة ES6، والبعض يقول أن ES6 تعني ES2015، ES7 تعني ES2016، وهكذا، وهو ما لن يتم التطرق إليه هنا.

ES2015 (ES6)

ES2015 هو الإصدار الذي يحتوي على أكبر التغييرات بشكل أساسي، وقد تم توسيع كل المحتوى قبل ES2015، كما هو موضح في الشكل التالي:

Let والكلمات الأساسية const والنطاق على مستوى الكتلة

قبل ES6، كانت هناك طريقة واحدة فقط للإعلان عن المتغيرات، وهي استخدام الكلمة الأساسية var . في ES2015، تمت إضافة الكلمات الأساسية let و const للإعلان عن المتغيرات

والثوابت يلي:

// متغير الإعلان Let v = 100
الخامس = 200
// أعلن ثابت const V = 200
// تعديل الثوابت // V = ​​​​300 //

المتغيرات

أو الثوابت المعلنة باستخدام الكلمات الأساسية let و const لها نطاق على مستوى الكتلة

.

  فار ضد = 100
}
{
  دع فال = 200
}
console.log(v)
console.log(val) // لم يتم تعريف خطأ val.

تجدر الإشارة إلى أن المتغيرات المعلنة باستخدام الكلمات الرئيسية let أو const لا تتمتع بخصائص ترقية المتغير، وهناك منطقة ميتة مؤقتة.

امتداد الوظيفة

للوظائف باستخدام القيم الافتراضية في ES2015. نموذج التعليمات البرمجية كما يلي:

// قبل es2015 function foo(v) {.
  ت = ت ؟ ت : 100
  إرجاع
}
//es2015
شريط الوظائف (الخامس = 100) {
  إرجاع
}

تجدر الإشارة إلى أنه في حالة وجود معلمات متعددة، يجب استخدام المعلمات الافتراضية من الخلف إلى الأمام .

تمت إضافة وظائف السهم في ES2015، وهي عبارة عن نموذج مختصر للوظائف ، ونموذج التعليمات البرمجية كما يلي:

function foo(v) {.
  العودة v``
}
// تمت كتابة دالة السهم const foo = (v) => {
  إرجاع
}
// الاختصار 1
const foo = v => { // يمكن لمعلمة واحدة فقط حذف الأقواس return v
}
// الاختصار 2
const foo = v => v // يمكنك حذف الأقواس المتعرجة والإرجاع عندما يكون هناك إرجاع فقط في العبارة.

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

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

رمز المثال هو كما يلي:

const foo = (...args) => {.
  // console.log(arguments) // خطأ مرجعي: لم يتم تعريف الوسائط
  console.log(args) // args عبارة عن مصفوفة}
foo(1, 2, 3, 4) // [1, 2, 3, 4]

تشير سمة الاسم المضافة إلى الوظيفة في ES2015 إلى اسم الوظيفة،

نموذج التعليمات البرمجية كما يلي:

function foo(v) {
  إرجاع
}
شريط ثابت = v => v
console.log(foo.name) // foo

القيمة

الشريطية

يضيف توسيع القيمة في ES2015 بشكل أساسي بعض الأساليب إلى كائنات Math Number ، بالإضافة إلى طرق التمثيل الثنائي والثماني.

في ES2015، يتم استخدام 0b أو 0B لتمثيل النظام الثنائي، ويتم استخدام 0o أو 0O لتمثيل النظام الثماني.

نموذج التعليمات البرمجية كما يلي:

console.log(0b111111111 === 511) // true
console.log(0o777 === 511) //

السمات والأساليب الموسعة بواسطة true للرقم هي كما يلي:

طريقة ملحق الرياضيات هي كما يلي:

امتداد السلسلة

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

ويكون نموذج التعليمات البرمجية كما يلي:

// استخدم ` لتحديد سلسلة القالب Let str = `a bowl of الأسابيع`
// يمكن أن تحتفظ سلسلة القالب بالتنسيق Let str2 = `وعاء الأسابيع`
// يمكن لسلسلة القالب استخدام المتغير const myName = 'وعاء من الأسابيع'
Let str3 = `author: ${myName}` // استخدم ${} للالتفاف

ES2015 يوسع أيضًا بعض الطرق لمثيلات السلسلة والسلسلة، كما يلي:

امتداد

المصفوفة عامل توسيع في ES2015، أي...، يُستخدم في مصفوفة لتوسيع المصفوفة. وفصلها بفواصل،

نموذج التعليمات البرمجية كما يلي:

const arr = [1, 2, 3, 4, 5, 6]
const newArr = [...arr] // انسخ المصفوفة console.log(Math.max.call(null, ...arr)) // استخدم كل عنصر في المصفوفة

كمعلمة توفير سلسلة من الأساليب، والتي سيتم تقديمها واحدة تلو الأخرى:

Array.from() : إنشاء كائن يشبه المصفوفة أو كائن قابل للتكرار كمصفوفة جديدة . نموذج التعليمات البرمجية كما يلي:

function foo() {.
  إرجاع Array.from(arguments) // تحويل الوسائط إلى صفيف}

console.log(foo(1, 2, 3, 4, 5, 6)) // [ 1, 2, 3, 4, 5, 6 ]

Array.of() : إنشاء مصفوفة جديدة بعدد متغير من الوسائط على سبيل المثال ، نموذج التعليمات البرمجية كما يلي:

Array.of(1) // [1]
Array.of(true, 1, 'وعاء الأسابيع') // [true, 1, 'وعاء الأسابيع']

Array.prototype.copyWithin()، ينسخ جزءًا من المصفوفة بشكل سطحي إلى موقع آخر في نفس المصفوفة وإرجاعه لا يغير طول المصفوفة الأصلية.

نموذج التعليمات البرمجية كما يلي:

const arr = [1, 2, 3, 4]

// ابدأ من الفهرس 2 وانسخ المحتوى إلى الفهرس 0 في النهاية arr.copyWithin(0, 2) // [ 3, 4, 3, 4 ]

Array.prototype.find() ، وفقًا لوظيفة رد الاتصال المحددة، ابحث عن العنصر المطابق الأول، وأعده غير محدد إذا لم يتم العثور عليه . نموذج التعليمات البرمجية كما يلي:

const arr = [1, 2, 3, 4]
arr.find(item => item === 2) // 2 (يشير إلى العنصر)،

Array.prototype.findIndex() ، وفقًا لوظيفة رد الاتصال المحددة، ابحث عن فهرس العنصر المطابق الأول، وارجع إذا لم يتم العثور عليه - 1 ، نموذج التعليمات البرمجية كما يلي:

const arr = [1, 2, 3, 4]
arr.findIndex(item => item === 2) // 1 (يشير إلى الفهرس)

Array.prototype.fill() ، يملأ المصفوفة بالقيمة المحددة نموذج التعليمات البرمجية كما يلي:

const arr = [1, 2 , 3, 4 ]
// املأ الفهرس 1-3 بالقيمة المحددة
arr.fill('وعاء الأسابيع', 1, 3) // [ 1, 'وعاء الأسابيع', 'وعاء الأسابيع', 4 ]

Array.prototype.keys() ‎ ، يُرجع كائنًا قابلاً للتكرار محتوياته هو مفتاح المصفوفة ، نموذج التعليمات البرمجية كما يلي:

const arr = [1, true, 'A bowl of الأسابيع']
مفاتيح ثابتة = arr.keys()
لـ (const i للمفاتيح) {
  console.log(i) // نتائج الاجتياز 0 1 2
}

Array.prototype.values() ‎، يُرجع كائنًا قابلاً للتكرار يكون محتواه هو قيمة المصفوفة .

نموذج التعليمات البرمجية كما يلي:

const arr = [1, true, 'A bowl of Zhou']
قيم ثابتة = arr.values()
لـ (ثابت القيم) {
  console.log(i) // نتيجة الاجتياز 1 صحيح وعاء من الأسابيع}

Array.prototype.entries() ‎، تُرجع كائنًا قابلاً للتكرار يكون محتواه عبارة عن مصفوفة. الفهرس 0 هو عنصر المصفوفة الأصلية، و 1 هو العنصر قيمة الموضع،

رمز العينة كما يلي:

const arr = [1, true, 'A bowl of الأسابيع']

مكرر const = arr.entries()
console.log(Array.from(iterator)) // [ [ 0, 1 ], [ 1, true ], [ 2, 'وعاء من الأسابيع' ] ]

امتداد الكائن

في ES2015 باسم سمة الكائن و أن تكون قيمة السمة متسقة، يمكنك فقط كتابة اسم السمة،

ويكون نموذج التعليمات البرمجية كما يلي:

const myName = 'وعاء من الأسابيع'.
السن الثابت = 18
شخص ثابت = { اسمي، العمر }
console.log(person) // { myName: 'A bowl of Zhou', age: 18 }

بالإضافة إلى ذلك، عند تعريف كائن، يُسمح لك باستخدام التعبيرات الملتفة [] كأسماء سمات.

const myName = "أسبوع الوعاء"
السن الثابت = 18
شخص ثابت = {
  اسمي,
  ['a' + 'g' + 'e']: العمر،
}
console.log(person) // { myName: 'One Bowl Zhou', age: 18 }

Object.is() : يُستخدم لمقارنة القيمتين ​​​​​​​​​المتساويتين، ويستخدم لحل NaN ≠= NaN, +0 === - 0 مشكلة،

نموذج التعليمات البرمجية كما يلي:

console.log(NaN === NaN) // false
console.log(+0 === -0) // صحيح

console.log(Object.is(NaN, NaN)) // صحيح
console.log(Object.is(+0, -0)) // false

Object.assign() : نسخ قيم جميع الخصائص القابلة للإحصاء من كائن مصدر واحد أو أكثر إلى الكائن الهدف وإرجاع الكائن الهدف،

على سبيل المثال الكود كما يلي:

const person = Object.assi({}, { name: 'One Bowl Zhou' }, { age: 18 })
console.log(person) // { name: 'One Bowl Zhou'، العمر: 18 }

• Object.getPrototypeOf() : احصل على كائن النموذج الأولي
• Object.setPrototypeOf() : قم بتعيين كائن النموذج الأولي .

الفصول

مفهوم الفئات في ES2015، وتتوفر الفئات على مستوى بناء الجملة. نموذج التعليمات البرمجية كما يلي:

class Person {.
  منشئ (العمر) {
    // السمة this.myName = "وعاء الأسابيع"
    this.age = age
  }
  // الطريقة الثابتة طباعة ثابتة () {
    console.log()
  }
  // يحصل الوصول على myName() {
    console.log('جيتر')
    العودة "وعاء من الأسابيع"
  }
  تعيين اسمي (ت) {
    console.log("واضع" + v)
  }
  اسم المجموعة (ت) {
    this.myName = v
  }
}
شخص ثابت = شخص جديد (18)
person.setName('ywanzhou') // تشغيل وحدة وصول الضبط console.log(person.myName) // تشغيل أداة الوصول إلى getter

Modularity

التي اقترحت مواصفات نموذج ESModel في ES2015، وهي أول مواصفات نمطية على المستوى الرسمي في هذا المواصفات المسموح لنا باستخدامها في التصدير لتصدير الوحدات والاستيراد لتقديم الوحدات

نموذج التعليمات البرمجية كما يلي:

import a from 'm' // استيراد التصدير الافتراضي في الوحدة m وتسميته a
import a, { b } from 'm' // استيراد التصدير الافتراضي في الوحدة m واستيراد العضو b بشكل منفصل
استيراد * كـ A من 'm' // استيراد جميع الأعضاء في الوحدة import 'm' // تنفيذ تصدير الوحدة m const b = 1 // تصدير بشكل منفصل تصدير افتراضي b // تصدير افتراضي تصدير { b } // تصدير عند الطلب تصدير { b كـ bb } // إعادة تسمية وتصدير تصدير { b } من 'm' // استيراد العضو b في الوحدة النمطية m وتصدير

مهمة التدمير

أضاف ES2015 بناء جملة جديدًا لمهمة التدمير، مما يسمح لنا باستخدام أنماط معينة في arrays أو قم باستخراج القيمة المحددة من الكائن.

نموذج التعليمات البرمجية كما يلي:

// تدمير مهمة المصفوفة Let [name, age, hobby = 'coding' /* القيمة الافتراضية لتخصيص البنية */] = ['A Bowl. تشو، 18]
// مبادلة قيم المتغيرين دع a = 1
دع ب = 2
؛[أ، ​​ب] = [ب، أ]
console.log(أ، ب) // 2 1

// تعيين بنية الكائن Let { name: ObjName /* إعادة تسمية مهمة التدمير*/, sex } = { name: 'وعاء الأسابيع'، الجنس: 1 }

// تدمير تعيين معلمات الوظيفة function bar({ name, age }) {
  اسم العودة + العمر
}
bar({ name: 'A Weeks', age: 18 }) // وعاء من الأسابيع 18

الرمز

هو نوع بيانات جديد في ES2015، يتم إنشاؤه من خلال طريقة Symbol() ويمكنه تمرير سلسلة كملف المعلمة المستخدمة لوصف الرمز؛

قيم الرمز التي تم إنشاؤها من خلال طريقة الرمز () كلها فريدة من نوعها

.
 * بناء الجملة * الرمز([الوصف])
 * * الوصف -> معلومات وصف اختيارية */
// أنشئ قيمة من النوع الرمز const mySymbol = الرمز ()
console.log(mySymbol) // الرمز ()

const myName = الرمز ("وعاء الأسابيع")
console.log(typeof myName) // الرمز

يحتوي الرمز أيضًا على سلسلة من الخصائص والطرق التي لن يتم تقديمها هنا.

Promise

Promise هو حل غير متزامن متوفر في ES2015، والذي يحل مشكلة رد الاتصال.

يمكن إنشاء كائن وعد من خلال مُنشئ Promise() . كل كائن وعد له الحالات التالية:

• معلق: الحالة الأولية، ليست حالة نجاح أو فشل.
• تم الحل: يعني أن العملية قد اكتملت بنجاح.
• مرفوض: يعني فشل العملية.

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

• معلق → تم حله
• معلق → تم حله

. بمجرد تغيير الحالة، لن تتغير مرة أخرى.

هناك طريقة then في مثيل Promise ، مما يسمح لنا بتسلسل الاستدعاءات في مثيل Promise then تحتوي الطريقة أيضًا على نسخة Promise سيتم إرجاعها،

كما هو موضح في الشكل أدناه:

نموذج التعليمات البرمجية كما يلي:

الوعد الجديد((الحل، الرفض) => {
    console.log("أنا سجل الوعد الأول")
    حل()
})
    .ثم(() => {
        console.log ("أنا مسجل الدخول أولاً")
    })
    .ثم(() => {
        console.log("أنا سجل الدخول الثاني، ولكن لدي استثناء")
        رمي خطأ جديد ("خطأ")
    })
    .ثم(() => {
        console.log("أنا سجل رد الاتصال الأول في الثالث، لكنني لن أنفذه بسبب حدوث استثناء فوقي")
    }, () => {
        console.log("أنا سجل رد الاتصال الثاني في الثالث ثم قمت بتنفيذه")
    })
    .ثم(() => {
        console.log("أنا السجل الرابع، إذن يمكنني التنفيذ بشكل طبيعي")
    })

/* نتيجة التنفيذ هي كما يلي: لقد قمت بتسجيل الدخول في الوعد الأول
أنا سجل في أول ثم
أنا سجل في الثانية، لكنني حصلت على استثناء، أنا سجل رد الاتصال الثاني في الثالث، ثم قمت بتنفيذه بشكل طبيعي */

ذات صلة طرق Promise هي كما يلي:

• Promise.prototype.then() : يتطلب معلمتين على الأكثر: وظيفة رد الاتصال لنجاح Promise وفشله
• Promise.prototype.catch() : يساوي المعلمة الثانية then
• Promise.all()
؛
• Promise.all() : حزم مثيلات متعددة في مثيل جديد، وإرجاع مصفوفة النتائج بعد كل تغييرات حالة المثيل (تغيير جميع التغييرات ثم العودة)
• Promise.race() : حزم مثيلات متعددة في مثيل جديد، وإرجاع حالة المثيل بالكامل، إعطاء الأولوية لـ نتيجة تم تغييرها (التغيير أولاً والعودة أولاً)
• Promise.resolve() : تحويل الكائن إلى كائن Promise (أي ما يعادل new Promise(resolve => resolve()) )
• Promise.reject() : تحويل الكائن إلى حالة rejected كائن الوعد (أي ما يعادل new Promise((resolve, reject) => reject()) )

Iterator

Iterator عبارة عن واجهة مكررة توفر آلية وصول موحدة لهياكل البيانات المختلفة ينشر الهيكل واجهة التكرار، ويمكن اجتيازه بطريقة موحدة.

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

يمكن تسمية الكائن الذي يحتوي على الطريقة next() بكائن قابل للتكرار. سيعيد الكائن next() كائنًا يحتوي على قيمتين،

كما هو موضح أدناه:

• value : أي قيمة JavaScript يتم إرجاعها بواسطة المكرِّر. يمكن حذفها عندما يكون done true .
• done : قيمة منطقية عندما تكون false ، فهذا يعني أن التكرار لم يتوقف. وعندما تكون true ، فإنها توقف المكرر على الفور، ويمكن حذف value .

تظهر واجهة التكرار المقدمة أصلاً بواسطة JavaScript في الشكل أدناه:

الآن نقوم بتنفيذ مكرر لـ obj، الكود كما يلي:

const obj = {
    [Symbol.iterator] () {
        يعود {
            التالي () {
                console.log("تم تنفيذ المكرر");
                يعود {
                    قيمة: ''،
                    تم: صحيح // ضع علامة على ما إذا كان قد انتهى، صحيح يعني أنه قد انتهى}
            }
        }
    }
}

لقد أضفنا طباعة في الطريقة next() للتحقق من تنفيذ المكرر، وكانت النتيجة النهائية للتشغيل هي أنه

تم تنفيذ المكرر.

Generator

Generator هو حل برمجة غير متزامن تم توفيره في ES2015 الكلمة الأساسية function استخدم علامة النجمة * بين اسم الوظيفة واسم الوظيفة، واستخدم الكلمة الأساسية الخاصة yield داخل الوظيفة لتحديد حالات مختلفة.

نموذج التعليمات البرمجية كما يلي:

function* testGenerator() {
  // العائد يحدد عائد الحالة "وعاء الأسابيع"
  تسفر عن "ميزات جديدة"
  إرجاع "المولد" // إنهاء المولد، حتى لو كانت هناك كلمة رئيسية تؤدي لاحقًا، فستكون غير صالحة}
const g = testGenerator() // قم بإرجاع كائن المولد ونقل الحالة من خلال الطريقة التالية () g.next()
/* { القيمة: "وعاء تشو"، تم: خطأ } */

ز.التالي()
/* { القيمة: "الميزات الجديدة"، تم: خطأ } */

ز.التالي()
/* { value: 'generator', Done: true } */

الوكيل وReffect

Proxy لإنشاء كائن وكيل لتنفيذ الاعتراض وتخصيص العمليات الأساسية. هناك 13 عملية أساسية، كما هو موضح في الجدول التالي:

تتم كتابة Vue3 بناءً على Proxy ، ويوضح التعليمة البرمجية التالية استخدام كائنات Proxy :

<!DOCTYPE html>
<html لانج="ar">
<الرأس>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, الأولي-سكيل=1.0" />
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" />
  <title>تحديث dom تلقائيًا من خلال المجموعة</title>
</الرأس>

<الجسم>
  <p class = "بطاقة" نمط = "العرض: 300 بكسل؛ الهامش: 100 بكسل تلقائي">
    <p class="card-body">
      <h1 معرف = "اسم"></h1>
      <button id="btn" class="btn btn-primary">تعديل</button>
    </ص>
  </ص>
  <النص البرمجي>
    // احصل على عقدة DOM const name = document.getElementById('name')
    const btn = document.getElementById('btn')
    // تحديد دالة تعدل القيمة const updateDOM = (el, value) => {
      el.innerHTML = القيمة
    }
    شخص ثابت = وكيل جديد({
      الاسم: "وعاء من العصيدة"،
    }، {
      مجموعة (الهدف، PropKey، القيمة) {
        // إذا تغيرت القيمة الموجودة بالداخل، فاتصل بـ updateDOM الخاص بنا
        updateDOM (الاسم، القيمة)
        target[propKey] = value
        العودة صحيحا
      },
    })
    name.innerHTML = person.name
    // انقر فوق الزر لبدء عملية التعديل btn.addEventListener('click', () => {
      person.name === "وعاء من تشو"؟
        (person.name = 'وعاء من العصيدة'):
        (اسم الشخص = 'وعاء واحد تشو')
    })
  </script>
</الجسم>
</html>

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

إن الانعكاس هو كائن يوفره ECMAScript2015، وهو يوفر بعض الأساليب الثابتة لاعتراض عمليات JavaScript. وتتوافق هذه الأساليب مع الأساليب الموجودة في handlers في الوكيل.

إن Reflect ليس منشئًا، مما يعني أنه لا يمكن إنشاء مثيل له.

كل عملية اعتراض في كائن Proxy (على سبيل المثال: get ، delete ، وما إلى ذلك) تستدعي طريقة Reflect داخليًا وفقًا لذلك. تتوافق الأساليب الثابتة التي توفرها مع أسماء الأساليب الموجودة في handlers في الوكيل،

كما يلي:

Set وMap وWeakSet وWeakMap

Set و Map و WeakSet و WeakMap هي عدة كائنات جديدة في ES2015:

• Set و WeakSet يشبهان المصفوفات، على وجه الدقة، هما عبارة عن مجموعات. الفرق بين الاثنين هو أن Set يمكنه تخزين أي نوع بيانات، بينما يمكن لـ WeakSet تخزين مراجع الكائنات فقط، وهي مراجع

ضعيفة تعيين الكائنات في التطوير الفعلي هو تنفيذ إلغاء البيانات المكررة، نموذج التعليمات البرمجية كما يلي:

const arr = [1, 2, 2, 3, 4, 3, 5]
مجموعة const = مجموعة جديدة (arr)
// يمكن استخدام كائن المجموعة... لتوسيع كافة العناصر console.log([...set]) // [ 1, 2, 3, 4, 5 ]

• Map و WeakMap يشبهان الكائنات ويتم تخزينهما في شكل أزواج القيمة الرئيسية نعم، الفرق بين الاثنين هو أن أزواج القيمة الرئيسية Map يمكن أن تكون عشوائية، في حين أن مفاتيح WeakMap يجب أن تكون إشارات إلى كائنات ويمكن أن تكون القيم من أي نوع.

ES2016 (ES7)

يُصدر ES2016 عددًا قليلًا نسبيًا من الميزات الجديدة، بشكل أساسي ميزتين جديدتين، كما هو موضح في الشكل أدناه:

عامل الأس

ES2016 على أس جديد ** ، ويسمى أيضًا عامل الطاقة، وله نفس وظيفة Math.pow().

نموذج التعليمات البرمجية كما يلي:

console.log(2 ** 10 === Math.pow (2، 10 )) //

includes()

طريقة Array.prototype.includes()

ES2016 نموذج التعليمات البرمجية كما يلي:

const arr = [1, 2, 3, 4, 5, NaN]
console.log(arr.indexOf(NaN)) // -1
console.log(arr.includes(NaN)) // صحيح

تجدر الإشارة إلى أن NaN و NaN و +0 و -0 متساويان عند استخدام includes() .

إي إس 2017 (ES8)

السكر غير المتزامن/الانتظار

يحل مشكلة رد الاتصال، إلا أنه إذا كان هناك عدد كبير جدًا من المكالمات المتسلسلة، فستظل إمكانية القراءة أسوأ. السكر الجديد غير المتزامن/الانتظار في ES2017 يحل هذه المشكلة.

الوعد مكتوب كالتالي:

;(function () {
  وعد الوظيفة (ت) {
    إرجاع وعد جديد ((حل، رفض) => {
      العزم (الخامس)
    })
  }
  ثابت ع = الوعد (1)
  ص. ثم (الدقة => {
    وعد العودة (الدقة)
  }).ثم(الدقة => {
    console.log(الدقة)
  })
})()

إذا كان الوعد التالي يعتمد على الوعد السابق، فستكون سلسلة الاستدعاءات هذه طويلة جدًا الآن، فلنعد كتابتها باستخدام السكر النحوي async/await:

;(async function () {.
  وعد الوظيفة (ت) {
    إرجاع وعد جديد ((حل، رفض) => {
      العزم (الخامس)
    })
  }
  const r1 = انتظار الوعد(1)
  const r2 = انتظار الوعد (r1)
  const res = انتظار الوعد (r2)
  console.log(الدقة)
})()

كما ترون، يمكننا استخدام السكر النحوي غير المتزامن/الانتظار لإعادة كتابة Promise بطريقة كتابة مسطحة.

كائن Atomics

جديدًا

من

new الثابتة لتشغيل كائنات SharedArrayBuffer وArrayBuffer

ممتد للكائن في ES2017، كما يلي:

• Object.values() : يُرجع مصفوفة من جميع قيم الخصائص القابلة للإحصاء لكائن معين نفسه؛
• Object.entries() : يُرجع مصفوفة من جميع قيم الخصائص القابلة للإحصاء لكائن معين الكائن نفسه. مصفوفة من أزواج القيمة الرئيسية للخصائص المذكورة؛
• Object.getOwnPropertyDescriptors() : إرجاع واصفات الخصائص لجميع الخصائص الخاصة بكائن معين.

توسيع الوظيفة

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

رمز المثال كما يلي:

function fun(
  آآآآ,
  بببب,
  سي سي سي سي,
) {}

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

توسيع السلسلة

طريقتين جديدتين للسلاسل في ES2017، وهما:

• padStart() : يملأ المسافات في بداية السلسلة؛
• padEnd() : يملأ المسافات في نهاية

السلسلة

؛ = 'وعاء من تشو'
console.log(str.padStart(10)) /* وعاء من تشو*/
console.log(str.padEnd(10)) /* ييوان تشو*/

ES2018(ES9)

التكرار غير المتزامن

على for await...of جديدة في ES2018، والتي يمكن استخدامها لاجتياز الكائنات القابلة للتكرار غير المتزامنة.

نموذج التعليمات البرمجية كما يلي:

var asyncIterable = {.
  [Symbol.asyncIterator]() {
    يعود {
      ط: 0،
      التالي() {
        إذا (هذا.أنا <3) {
          إرجاع Promise.resolve({ القيمة: this.i++، تم: false })
        }

        إرجاع Promise.resolve({ تم: صحيح })
      },
    }
  },
}
؛(وظيفة غير متزامنة () {
  للانتظار (عدد غير متزامن) {
    console.log(رقم)
  }
})()

// 0
// 1
// 2

امتدادات التعبير العادي

في ES2018، تم إجراء الامتدادات التالية للتعبيرات العادية:

تسمية مجموعة التعبير العادي:

قبل ES2018، لم نتمكن من تسمية المجموعات في التعبيرات العادية، تم تقديم هذه الميزة في ES2018، فهي لا تسهل القراءة المنتظمة فحسب مرجع،

نموذج التعليمات البرمجية كما يلي:

const RE_DATE = /(?<year>d{4})-(?<month>d{2})-(?<day>d {2})/

const matchObj = RE_DATE.exec('2022-02-22')
سنة ثابتة = matchObj.groups.year // 2022
شهر ثابت = matchObj.groups.month // 02
const day = matchObj.groups.day // 22

s modifier/dotALLl mode: يسمح معدِّل s الجديد باستخدام أي حرف منفرد . وتشير السمة **** إلى ما إذا كان سيتم استخدام تعديل " s " معًا في رمز التعبير العادي .

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

عامل انتشار الكائن

تمت إضافة عامل انتشار مصفوفة جديد في ES2015، في ES2018، تمت إضافة هذه الميزة إلى الكائن. نموذج التعليمات البرمجية كما يلي:

const n = { name: 'One Bowl of Zhou' }
ثابت أ = { العمر: 18 }
شخص ثابت = { ...ن، ...أ }
// كائن الدمج console.log(person) // { name: 'A Bowl of Zhou'، العمر: 18 }

Promise.prototype.finally()

ستعيد الطريقة finally() كائن Promise عندما تكون حالة الوعد التغييرات، سواء تم rejected أو fulfilled ، سيتم تنفيذ رد الاتصال finally() .

نموذج التعليمات البرمجية كما يلي:

fetch(url)
  .ثم(الدقة => {
    console.log(الدقة)
  })
  .catch(خطأ => {
    console.log(خطأ)
  })
  .أخيرًا(() => {
    console.log('النهاية')
  })

ES2019(ES10)

التحسين

بتحسين المحتوىين التاليين في ES2019:

• Function.prototype.toString() : يحتوي نص الوظيفة الذي تم إرجاعه على تعليقات ومسافات؛
• try...catch : لا يسمح catch الموجود في العبارة بأي معلمات كما يلي:

حاول {
  console.log ("وعاء الأسابيع")
} يمسك {
  console.error('وعاء الأسابيع')
}

TrimStart()/trimLeft() وtrimEnd()/trimRight()

• String.prototype.trimStart : يُستخدم لإزالة المسافات على الجانب الأيسر من السلسلة؛
• String.prototype.trimLeft : وهو اسم مستعار لـ trimStart
• String.prototype.trimEnd : يُستخدم لإزالة المسافات الموجودة على الجانب الأيمن من السلسلة؛
• String.prototype.trimRight : trimEnd

امتداد لمصفوفة الاسم المستعار

، تم توسيع طريقتين للصفيف في ES2019، وهما:

• Array.prototype.flat() : This ستتبع الطريقة اجتياز المصفوفة بشكل متكرر عميقًا ودمج جميع العناصر مع العناصر الموجودة في المصفوفة الفرعية التي تم اجتيازها في مصفوفة جديدة وإعادتها، وذلك ببساطة لتحقيق تسوية المصفوفة.

ثابت آر = [0، 1، 2، [3، 4]]
console.log(arr.flat()) // [ 0, 1, 2, 3, 4 ]

• Array.prototype.flatMap() : تقوم هذه الطريقة بتعيين المصفوفة وتسطيحها وإرجاع مصفوفة جديدة (يمكن لمستوى واحد فقط من المصفوفة يمكن توسيعها).

Object.fromEntries()

تقوم طريقة Object.fromEntries() الجديدة في ES2019 بتحويل قائمة أزواج القيمة الرئيسية إلى كائن، وهي عملية عكسية لطريقة Object.entries() .

نموذج التعليمات البرمجية هو كما يلي:

const person = {
  الاسم: "وعاء من تشو"،
  العمر: '18'،
}
const e = Object.entries(person)

const p = Object.fromEntries(e)
console.log(p) // { name: 'وعاء الأسابيع'، العمر: '18' }

Code.prototype.descrption

description خاصية للقراءة فقط تقوم بإرجاع سلسلة الوصف الاختيارية عند إنشاء كائن الرمز .

إي إس 2020 (ES11)

الوحدة النمطية

استيرادًا ديناميكيًا في ES2020، مما يعني أنه سيتم تحميل الوحدة عندما نحتاج إليها، مما قد يقلل من الحمل الزائد ووقت تحميل الصفحة. نموذج التعليمات البرمجية كما يلي:

import('/modules/my-module.js'). ثم (الوحدة => {
  // افعل شيئًا ما باستخدام الوحدة النمطية.
})

يستخدم الاستيراد الديناميكي طريقة import() التي تُرجع وعدًا.

في ES2020، تتم أيضًا إضافة كائن meta import ، مما يعرض كائنًا من سمات البيانات التعريفية الخاصة بالسياق إلى وحدة JavaScript.

نوع البيانات BigInt

BigInt يحل مشكلة أن الحد الأقصى المسموح به في JavaScript هو 2**53-1 يمكن أن يمثل BigInt أي عدد صحيح كبير.

const theBiggestInt = 9007199254740991n;
constalsoHuge = BigInt(9007199254740991);
// ↪ 9007199254740991n
constضخمةString = BigInt("9007199254740991");
// ↪ 9007199254740991n
constضخمةHex = BigInt("0x1ffffffffffffff");
// ↪ 9007199254740991n
constضخمBin = BigInt("0b11111111111111111111111111111111111111111111");
// ↪ 9007199254740991n

global

تم تقديم هذا الكائن globalThis في ES2020، وهو مقدمة للكائنات العالمية. الكائن العام في Node هو Global ، وبيئة المتصفح هي Window ، ويوضح الكود التالي الفرق بين وجود GlobalThis :

// before فار getGlobal = وظيفة () { 
  if (typeof self !== 'undef') { return self } 
  إذا (نوع النافذة! == 'غير محدد') { نافذة العودة } 
  إذا (نوع العمومي !== 'غير محدد') {return global } 
  رمي خطأ جديد ("غير قادر على تحديد موقع الكائن العام")؛ 
}; 

var globals = getGlobal(); 

إذا (typeof globals.setTimeout !== 'function') { 
  // لا يوجد setTimeout في هذه البيئة! 
}

// بعد if (typeof globalThis.setTimeout !== 'function') {
  // لا يوجد setTimeout في هذه البيئة!
}

عامل دمج القيمة الخالية

يتم تمثيل عامل دمج القيمة الخالية بواسطة علامتي استفهام. هذا العامل هو أيضًا عامل تشغيل منطقي، وهو مشابه لعامل التشغيل المنطقي OR. قاعدة الحساب هي أنه طالما أن المعامل الأيسر null أو undefined ، فسيتم إرجاع المعامل الأيمن، وإلا فسيتم إرجاع المعامل الأيسر. يقوم عامل التشغيل المنطقي OR بإرجاع المعامل الأيمن فقط إذا تم تحويل المعامل الأيسر إلى نوع boolean وكان false .

نموذج التعليمات البرمجية كما يلي:

console.log(null ?? 10) // 10
console.log (غير محدد ؟؟ 10) // 10

console.log

(

false؟ 10)

الرمز كما يلي:

var value

// إذا لم تكن قيمة القيمة فارغة أو غير محددة ، فقم بتعيينها بقيمة 10
القيمة = القيمة؟
Console.log (القيمة) // 10it

تجدر الإشارة إلى أن مشغل الفحم الفارغ والمنطقي والمنطقي أو لا يمكن استخدامه في نفس الوقت ، وإلا فإن الاستثناء هو الإشارة إلى الأولوية باستخدام ()

مشغل السلسلة الاختيارية

يتم استخدام مشغل السلسلة الاختياري لقراءة سمة بعمق في سلسلة الكائن. Aab ، نحتاج Aab إلى التأكد Aa A .

لن يتسبب استخدام مشغل السلسلة undefind في مثل هذه المشكلة.

var a = {}

(

//

error console.log (aa؟ .B)

// إذا كانت طريقة OBJ.Fun () موجودة ، فسيتم تسميتها مباشرة أدناه.
OBJ.FUN؟.A ()

PROMENT.ALLSETTLED ()

Promise.allSettled() .

ES2021 (ES12)

string.prototype.replaceall ()

تم

استبدال طريقة replaceall replaceAll()

const newstr = str.replaceall ('porridge' ، 'week')

(

NewsTr) / / وعاء من

الفواصل العددية

_

(

1_0000_0000

WeakRef

// الرمز 1000000

هو فقط لسهولة القراءة.

الإشارة إلى كائن آخر.

Promise

promise.all() Promise.any() Promise.any() (أي أن جميع الوعود تفشل/رفض) ، يتم إرجاع وعد فاشل ومثيل من نوع AccregateRror.

تم إضافة مشغلات المهمة

المنطقية

النحو

• &&=
• ||=
• ??=

؟؟ ] = [صحيح ، خطأ]
f1 && = "وعاء أسابيع" // يعادل str = str && 'وعاء من الأسابيع'
F2 || = "وعاء من الأسابيع" // يعادل str = str ||

f3

؟؟

امتداد فئة

تحديد

أعضاء الفصل دون تحديدها في constructor في ES2022.

  myName = 'وعاء من Zhou'
}
/* كلاهما متسق*/
الفئة C {
  منشئ () {
    myName = 'وعاء من Zhou'
  }
}

إذا تم إعلان أحد الأعضاء دون التهيئة ، فإن القيمة الافتراضية غير محددة.

في

ES2022 ، يُسمح لنا باستخدام المتغيرات المسمى بـ # كأعضاء خاصين في الفصل

.

  #Myname = 'One Bowl Week'
}
const c = جديد c ()
يجب الإعلان عن Console.log (#Myname) // الحقل الخاص "#Myname" في فئة مرفقة

await المستوى الأعلى

.

المستوى الأعلى دون استخدام دالة async

.
awaitasyncfun ()
console.log (123)

Object.hasown ()

Object.hasOwn() استخدام الكائن

.
  الاسم: "وعاء من Zhou" ،
  العمر: 18,
}
console.log (object.hasown (الشخص ، "الاسم") // صحيح
console.log (object.hasown (person ، 'sex')) // false

array.prototype.at ()

طريقة جديدة at() في es2022 ، وظيفتها هي الحصول على عضو في الصفيف ومعلماتها هي الفهرس

من

الصفيف.

6]
console.log (arr.at (-1)) // 6
// ما يعادل ARR [ARR.LENGTH - 1]

D

تعبير المعدل يضيف معدل A /d عند استخدام طريقة exec() للتعبير العادي ، إذا كان هناك معدل A /d ، فسيتم إرجاع المزيد من المؤشرات السمة المستخدمة للإشارة إلى قيمة فهرس البدء لنتيجة المطابقة في السلسلة الأصلية.

رمز العينة كما يلي:

const str = 'javaScript'
const r = /a /d

const m = r.exec (str)

Console.log

(

M.Endices [0])

خريطة العقل هي كما يلي: