ميزات جافا سكريبت الجديدة المتوقعة التي يجب أن تعرف عنها

منذ إصدار معيار ECMAScript 2015 (يُطلق عليه أيضًا ES6) ، تغيرت جافا سكريبت بشكل كبير. هذه أخبار جيدة جدًا لجميع مطوري JS. علاوة على ذلك ، يتم الآن إصدار إصدار جديد من ECMAScript كل عام. ربما لم تهتم كثيرًا بما ظهر في أحدث إصدار من المعيار ، والذي تم إصداره في يونيو 2019. يريد مؤلف المقال ، الذي ننشر ترجمته اليوم ، أن يشرح باختصار حول ابتكارات JavaScript ، وما يمكن توقعه في الإصدار التالي من معيار ECMAScript.



سيتم ذكر الفرص التي تكون مقترحاتها في المرحلة الثالثة من الموافقة (المرحلة 3) هنا. هذا يعني أنه من المحتمل ظهورها في الإصدار التالي من معيار ECMAScript ، لكن لا يمكن تأكيد ذلك بشكل أكيد. فيما يلي مستودع حيث يمكنك العثور على معلومات حول المقترحات في مراحل مختلفة من الموافقة.

ميزات ECMAScript 2019 (ES10)

يحتوي المعيار ES10 على العديد من الميزات الجديدة. هنا سننظر فقط في بعضها. وهي بضع طرق مجموعة جديدة.

▍ طريقة Array.prototype.flat

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

const array = [1, 2, [3, 4]]; array.flat(); // [1, 2, 3, 4]; 

هذه ميزة مفيدة للغاية ، خاصةً في الحالات التي تحتاج فيها للعمل مع المصفوفات المتداخلة. إذا تجاوز عمق تداخل الصفائف في بنية البيانات 1 ، فإن استدعاء واحد للطريقة flat لا يمكن أن يجعل المصفوفة "مسطحة" تمامًا. تقبل هذه الطريقة depth المعلمة الاختياري ، والذي يسمح لك بتحديد عدد مستويات التعشيق التي يجب تقليل بُعد الصفيف المعالج.

 //   const crazyArray = [1, 2, [3, 4], [[5], [6, [7,8]]]]; crazyArray.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8]; // ,  flat,     

كلما كانت المصفوفة أكثر عمقًا ، ستكون هناك حاجة لمزيد من موارد الحوسبة لمعالجتها. يرجى ملاحظة أن IE و Edge لا يدعمان هذه الميزة.

▍ طريقة Array.prototype.flatMap

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

 const arr = ["it's Sunny in", "", "California"]; arr.flatMap(x => x.split(" ")); // ["it's","Sunny","in", "", "California"] 

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

ميزات JS جديدة في المرحلة 3 الموافقة

في المرحلة الثالثة من التنسيق ، هناك العديد من المقترحات الجديدة المثيرة للاهتمام لتوسيع وتحسين اللغة. دعونا نفكر في بعضهم.

▍ عدد فواصل الأرقام

لقد حدث ذلك لك: اكتب رقمًا طويلًا في متغير وأشك في هجائه الصحيح؟ تسمح لنا الجملة المعنية بفصل أجزاء الأرقام بالأرقام السفلية. هذا يجعل من السهل العمل مع الأرقام.

 1_000_000_000      // ,   101_475_938.38     //     -     let fee = 123_00;    // $123 (, , 12300 ) let fee = 12_300;    // $12,300 (  !) let amount = 12345_00; // 12,345 (,  , 1234500 ) let amount = 123_45.00; // 12345 (, -  ) let amount = 1_234_500; // 1,234,500 let budget = 1_000_000_000_000; //   `budget`?  - 1 ! // // : console.log(budget === 10 ** 12); // true 

كل مطور ، بعد قبول هذه الميزة ، سيقرر بنفسه ما إذا كان سيتم استخدام فواصل التفريغ أم لا. ولكن هناك شيء واحد مؤكد: هذه الميزة يمكن أن تقلل من الإزعاج المرتبط بحساب أرقام الأعداد الكبيرة.

s الاستخدام في انتظار المستوى العلوي من التعليمات البرمجية

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

سبب هذه الميزة هو أنه عند استيراد وحدة نمطية تحتوي على دالة تم تعريفها باستخدام async ، فلن يتم تحديد إخراج هذه الوظيفة.

يوضح المثال التالي ملفين. قد لا يتم undefined في output إذا تم استدعاء الوظيفة قبل إكمال المهام الممثلة بالوعود.

 // awaiting.mjs import { process } from "./some-module.mjs"; const dynamic = import(computedModuleSpecifier); const data = fetch(url); export const output = process((await dynamic).default, await data); // usage.mjs import { output } from "./awaiting.mjs"; export function outputPlusValue(value) { return output + value } console.log(outputPlusValue(100)); setTimeout(() => console.log(outputPlusValue(100), 1000); 

كل شيء سوف يتوقف في awaiting.js حتى يتم حل awaiting.js في انتظار.

per المشغل؟ والتحقق من القيم فقط على فارغة وغير محددة

ربما ، من بين جميع عروض المرحلة 3 ، هذا هو الأكثر فائدة. غالبًا ما يتعين علينا كتابة شيء مثل هذا:

 const obj = {  name: 'James' }; const name = obj.name || 'Jane'; // James 

إذا تم تمثيل obj.name ببعض القيمة الخاطئة ، obj.name سلسلة Jane في name . نتيجة لذلك ، لن يكون name غير undefined . لكن المشكلة تكمن في اعتبار السلسلة الفارغة في هذه الحالة قيمة خاطئة. إذا تم أخذ ذلك في الاعتبار ، فيجب إعادة كتابة هذا الرمز على النحو التالي:

 const name = (obj.name && obj.name !== '') || 'Jane'; 

من غير المريح الكتابة هكذا طوال الوقت. المشغل ?? (علامتي استفهام) يسمحان بالتحقق من القيم null وغير undefined فقط:

 const response = {  settings: {    nullValue: null,    height: 400,    animationDuration: 0,    headerText: '',    showSplashScreen: false  } }; const undefinedValue = response.settings.undefinedValue ?? 'some other default'; // : 'some other default' const nullValue = response.settings.nullValue ?? 'some other default'; // : 'some other default' const headerText = response.settings.headerText ?? 'Hello, world!'; // : '' const animationDuration = response.settings.animationDuration ?? 300; // : 0 const showSplashScreen = response.settings.showSplashScreen ?? true; // : false 

▍Operator؟ وسلاسل اختياري

هذا الاقتراح قريب من الاقتراح الذي تم مراجعته للتو ، حيث يجمع بين عمليات التحقق undefined وغير undefined . من المعروف أن مستخدمي TypeScript مهتمون بهذه الميزة.
النظر في مثال:

 const city = country && country.city; // undefined  city   

من أجل الوصول إلى خاصية city كائن country ، تحتاج إلى التحقق من وجود كائن country ووجود خاصية city فيه.

باستخدام المشغل ?. (علامة استفهام وفترة) يمكن تحويل هذا الرمز مثل هذا:

 const city = country?.city; // undefined  city   

هذه الميزة تبدو مفيدة في مثل هذه الحالات:

 import { fetch } from '../yourFetch.js'; (async () => {  const res = await fetch();  // res && res.data && res.data.cities || undefined  const cities = res?.data?.cities; })(); 

▍ طريقة وعد

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

هذه هي الطريقة التي يبدو بها استخدام Promise.any مع إنشاء async / انتظار:

 try {  const first = await Promise.any(promises);  //      . } catch (error) {  //    . } 

إليك نفس الشيء الذي تم تنفيذه باستخدام الوعود:

 Promise.any(promises).then(  (first) => {    //      .  },  (error) => {    //    .  } ); 

يحتوي JavaScript بالفعل على Promise.all و .allSettled و .race ، ولكن بطريقة مشابهة. any ، لم يكن كذلك. نتيجة لذلك ، لدينا فرصة جديدة تكمل تلك الموجودة وقد تثبت فائدتها في مواقف معينة. على الرغم من أن هذا الاقتراح قد وصل بالفعل إلى المرحلة الثالثة من الموافقة ، فقد لا يتم إدراجه في الإصدار التالي من معيار ECMAScript لأنه يحتاج إلى اختبار إضافي.

النتائج

هناك العديد من الاقتراحات المثيرة للاهتمام لتطوير JavaScript والتي هي في المرحلة الثالثة من الموافقة. سيكون من المثير للاهتمام رؤيتهم في معايير ES11 و ES12. بالطبع ، من غير المحتمل أن يستخدمها أي شخص ، لكن بعضها سيجد بالتأكيد تطبيقًا واسعًا وسيساهم في نمو جودة كود JS.

أعزائي القراء! هل تستخدم بالفعل أي ميزات JavaScript جاهزة تقريبًا ليتم تضمينها في الإصدار التالي من المعيار؟