10 ميزات JavaScript جديدة في ES2020 يجب أن تعرفها

أخبار سارة - تم الآن الانتهاء من ميزات ES2020 الجديدة! هذا يعني أن لدينا الآن فكرة كاملة عن التغييرات التي تحدث في ES2020 ، المواصفات الجديدة والمحسّنة لـ JavaScript. لذلك دعونا نرى ما هي هذه التغييرات.

رقم 1: BigInt

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

في الوقت الحالي ، أقصى رقم يمكنك تخزينه كعدد صحيح في JavaScript هو pow(2, 53) - 1. لكن BigInt يسمح لك بالفعل بتجاوز ذلك.  

ومع ذلك ، يجب أن يكون لديك nملحق في نهاية الرقم ، كما ترى أعلاه. nيشير هذا إلى أن هذا هو BigInt ويجب معاملته بشكل مختلف بواسطة محرك JavaScript (بواسطة محرك v8 أو أي محرك يستخدمه).

هذا التحسين غير متوافق مع الإصدارات السابقة لأن نظام الأرقام التقليدي هو IEEE754 (والذي لا يمكنه دعم أرقام بهذا الحجم).

# 2: الاستيراد الديناميكي

تمنحك عمليات الاستيراد الديناميكية في JavaScript خيار استيراد ملفات JS ديناميكيًا كوحدات نمطية في تطبيقك محليًا. هذا تمامًا مثلما تفعل مع Webpack و Babel في الوقت الحالي.

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

الشيء الجيد هو أنك تقوم بالفعل باستيراد وحدة نمطية ، وبالتالي فهي لا تلوث مساحة الاسم العالمية.

رقم 3: اندماج لاغي

يضيف الاندماج الصفري القدرة على التحقق الحقيقي من nullishالقيم بدلاً من falseyالقيم. ما هو الفرق بين nullishو falseyالقيم، قد تسأل؟

في JavaScript ، هناك الكثير من القيم falsey، مثل السلاسل الفارغة ، والرقم 0 ، undefined، null، false، NaN، وهكذا.

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

في هذه الحالة ، ستستخدم عامل الاندماج الصفري الجديد ، ??

يمكنك أن ترى بوضوح كيف يُرجع عامل التشغيل OR دائمًا قيمة صحيحة ، بينما يُرجع عامل التشغيل nullish قيمة غير خالية.

رقم 4: تسلسل اختياري

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

هذا لا يعمل فقط على خصائص الكائن ، ولكن أيضًا على استدعاءات الوظائف والمصفوفات. مريحة للغاية! هذا مثال:

رقم 5: الوعد مستقر

على Promise.allSettledطريقة يقبل مجموعة من الوعود ويحل فقط عندما يتم تسويتها جميعا - سواء حلها أو رفضها.

وكان هذا غير متوفر أصلا من قبل، على الرغم من أن بعض التطبيقات مثل وثيقة raceو allكانت متاحة. يؤدي هذا إلى جلب عبارة "نفذ كل الوعود - لا أهتم بالنتائج" أصلاً إلى JavaScript.

رقم 6: String # matchAll

matchAllهي طريقة جديدة تمت إضافتها إلى Stringالنموذج الأولي المرتبط بالتعبيرات العادية. يؤدي هذا إلى إرجاع مكرر يقوم بإرجاع جميع المجموعات المتطابقة واحدة تلو الأخرى. دعنا نلقي نظرة على مثال سريع:

رقم 7: globalThis

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

هذا لأنه windowمخصص للمتصفحات globalول Node ولعاملي selfالويب. إذا كان هناك المزيد من أوقات التشغيل ، فسيكون الكائن العام مختلفًا بالنسبة لهم أيضًا.

لذلك كان عليك أن يكون لديك تنفيذ خاص بك لاكتشاف وقت التشغيل ثم استخدام العامل العالمي الصحيح - أي حتى الآن.

يجلبنا ES2020 globalThisوالذي يشير دائمًا إلى الكائن العالمي ، بغض النظر عن المكان الذي تقوم فيه بتنفيذ التعليمات البرمجية الخاصة بك:

رقم 8: صادرات مساحة اسم الوحدة النمطية

في وحدات JavaScript النمطية ، كان من الممكن بالفعل استخدام بناء الجملة التالي:

import * as utils from './utils.mjs'

ومع ذلك ، لا توجد exportبنية متماثلة حتى الآن:

export * as utils from './utils.mjs'

هذا يعادل ما يلي:

import * as utils from './utils.mjs' export { utils }

# 9: تعريف جيد للترتيب

لم تحدد مواصفات ECMA الترتيب الذي for (x in y)  يجب تشغيله. على الرغم من أن المتصفحات نفذت ترتيبًا ثابتًا من تلقاء نفسها قبل الآن ، فقد تم توحيد ذلك رسميًا في ES2020.

رقم 10: import.meta

و import.metaتم إنشاء الكائن تنفيذ ECMAScript، مع nullالنموذج.

ضع في اعتبارك وحدة module.js:

يمكنك الوصول إلى المعلومات الوصفية حول الوحدة النمطية باستخدام import.metaالكائن:

console.log(import.meta); // { url: "file:///home/user/module.js" }

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

استنتاج

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

هل ترغب في تعلم JavaScript ولغات البرمجة الأخرى بطريقة جديدة تمامًا؟ توجه إلى منصة جديدة للمطورين أعمل عليها لتجربتها اليوم!

ما هي الميزة المفضلة لديك في ES2020؟ أخبرني عن ذلك من خلال التغريد والتواصل معي على Twitter و Instagram!

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