دليل ES2017

ECMAScript هو المعيار الذي تستند إليه JavaScript ، وغالبًا ما يتم اختصاره إلى ES. اكتشف كل شيء عن ECMAScript ، والميزات المضافة في ES2017 ، المعروف أيضًا باسم ES8

ECMAScript 2017 ، الإصدار 8 من معيار ECMA-262 (المعروف أيضًا باسمES2017أوES8), was finalized in June 2017.

بالمقارنة مع ES6 ، يعد ES8 إصدارًا صغيرًا لجافا سكريبت ، لكنه لا يزال يقدم ميزات مفيدة للغاية:

  • حشو السلسلة
  • Object.values()
  • Object.entries()
  • Object.getOwnPropertyDescriptors()
  • الفواصل اللاحقة في قوائم واستدعاءات معلمات الوظيفة
  • وظائف غير متزامنة
  • الذاكرة المشتركة والذرات

حشو السلسلة

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

ES2017 يقدم اثنينStringأساليب:padStart()وpadEnd().

padStart(targetLength [, padString])
padEnd(targetLength [, padString])

استخدام العينة:

بادستارت ()
'test'.padStart (4) 'امتحان'
'test'.padStart (5) ' امتحان'
'test'.padStart (8) ' امتحان'
'test'.padStart (8،' abcd ') "abcdtest"
padEnd ()
'test'.padEnd (4) 'امتحان'
'test'.padEnd (5) 'امتحان '
'test'.padEnd (8) 'امتحان '
'test'.padEnd (8،' abcd ') "testabcd"

Object.values ()

تقوم هذه الطريقة بإرجاع مصفوفة تحتوي على جميع قيم خصائص الكائن.

استعمال:

const person = { name: 'Fred', age: 87 }
Object.values(person) // ['Fred', 87]

Object.values()يعمل أيضًا مع المصفوفات:

const people = ['Fred', 'Tony']
Object.values(people) // ['Fred', 'Tony']

مدخلات الكائن ()

تقوم هذه الطريقة بإرجاع مصفوفة تحتوي على جميع خصائص الكائن ، كمصفوفة من[key, value]أزواج.

استعمال:

const person = { name: 'Fred', age: 87 }
Object.entries(person) // [['name', 'Fred'], ['age', 87]]

Object.entries()يعمل أيضًا مع المصفوفات:

const people = ['Fred', 'Tony']
Object.entries(people) // [['0', 'Fred'], ['1', 'Tony']]

getOwnPropertyDescriptors ()

تقوم هذه الطريقة بإرجاع جميع واصفات الخصائص (غير الموروثة) الخاصة بكائن ما.

يحتوي أي كائن في JavaScript على مجموعة من الخصائص ، ولكل خاصية من هذه الخصائص واصف.

الواصف هو مجموعة من السمات الخاصة بالخاصية ، ويتكون من مجموعة فرعية مما يلي:

  • القيمة: قيمة العقار
  • قابل للكتابة: صحيح يمكن تغيير الخاصية
  • احصل على: دالة getter للخاصية ، تسمى عند قراءة الخاصية
  • تعيين: دالة setter للخاصية ، تسمى عند ضبط الخاصية على قيمة
  • شكلي: إذا كانت الخاصية false ، فلا يمكن إزالة الخاصية ولا يمكن تغيير أي سمة باستثناء قيمتها
  • معدود: صحيح إذا كانت الخاصية قابلة للعد

Object.getOwnPropertyDescriptors(obj)يقبل كائنًا ، ويعيد كائنًا بمجموعة الواصفات.

بأي طريقة هذا مفيد؟

أعطانا ES6Object.assign()، والتي تنسخ جميع الخصائص الخاصة التي يمكن تعدادها من كائن واحد أو أكثر ، وتعيد كائنًا جديدًا.

ومع ذلك ، هناك مشكلة في ذلك ، لأنه لا ينسخ الخصائص ذات السمات غير الافتراضية بشكل صحيح.

إذا كان الكائن على سبيل المثال يحتوي على أداة ضبط فقط ، فلن يتم نسخه بشكل صحيح إلى كائن جديد ، باستخدامObject.assign().

على سبيل المثال مع

const person1 = {
    set name(newName) {
        console.log(newName)
    }
}

هذا لن ينجح:

const person2 = {}
Object.assign(person2, person1)

لكن هذا سيعمل:

const person3 = {}
Object.defineProperties(person3,
  Object.getOwnPropertyDescriptors(person1))

كما ترى باختبار بسيط لوحدة التحكم:

person1.name = 'x'
"x"

person2.name = ‘x’

person3.name = ‘x’ “x”

person2يفتقد الواضع ، لم يتم نسخه.

ينطبق نفس القيد على الكائنات الضحلة مع الاستنساخObject.create().

الفواصل اللاحقة

تسمح هذه الميزة بالحصول على فواصل لاحقة في إعلانات الوظائف وفي استدعاءات الوظائف:

const doSomething = (var1, var2,) => {
  //...
}

doSomething(‘test2’, ‘test2’,)

سيشجع هذا التغيير المطورين على التوقف عن عادة "الفاصلة في بداية السطر" القبيحة.

وظائف غير متزامنة

تحقق من المنشور المخصص حولغير متزامن / انتظار

قدم ES2017 مفهوموظائف غير متزامنة، وهو أهم تغيير تم إدخاله في إصدار ECMAScript.

الدوال غير المتزامنة هي مزيج من الوعود والمولدات لتقليل النموذج المعياري للوعود ، و "عدم كسر السلسلة" للحد من تسلسل الوعود.

لماذا هم مفيدون

إنه تجريد أعلى من الوعود.

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

مثال سريع

يمكن كتابة التعليمات البرمجية التي تستخدم الوظائف غير المتزامنة كـ

function doSomethingAsync() {
    return new Promise((resolve) => {
        setTimeout(() => resolve('I did something'), 3000)
    })
}

async function doSomething() { console.log(await doSomethingAsync()) }

console.log(‘Before’) doSomething() console.log(‘After’)

سيطبع الكود أعلاه ما يلي إلى وحدة تحكم المتصفح:

Before
After
I did something //after 3s

Multiple async functions in series

Async functions can be chained very easily, and the syntax is much more readable than with plain promises:

function promiseToDoSomething() {
    return new Promise((resolve)=>{
        setTimeout(() => resolve('I did something'), 10000)
    })
}

async function watchOverSomeoneDoingSomething() { const something = await promiseToDoSomething() return something + ’ and I watched’ }

async function watchOverSomeoneWatchingSomeoneDoingSomething() { const something = await watchOverSomeoneDoingSomething() return something + ’ and I watched as well’ }

watchOverSomeoneWatchingSomeoneDoingSomething().then((res) => { console.log(res) })

Shared Memory and Atomics

WebWorkers are used to create multithreaded programs in the browser.

They offer a messaging protocol via events. Since ES2017, you can create a shared memory array between web workers and their creator, using a SharedArrayBuffer.

Since it’s unknown how much time writing to a shared memory portion takes to propagate, Atomics are a way to enforce that when reading a value, any kind of writing operation is completed.

Any more detail on this can be found in the spec proposal, which has since been implemented.


More js tutorials: