ميزات JavaScript الحديثة التي قد لا تكون على علم بها

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

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

ES2015

حرفية وثمانية

لا يتعين على جافا سكريبت غالبًا استخدام المعالجة الثنائية. لكن في بعض الأحيان تنشأ مهام لا يمكن حلها بطريقة أخرى. على سبيل المثال ، عندما تكتب رمزًا عالي الأداء للأجهزة الضعيفة ، فإنك تدفع وحدات البت في التخزين المحلي ، أو تقوم بمعالجة وحدات بكسل RGB في مستعرض ، أو تعمل بتنسيقات بيانات ثنائية معبأة بشكل وثيق.

كل هذا قد يتطلب الكثير من العمل على إخفاء / الجمع بين الأرقام الثنائية ؛ كان يبدو لي دائمًا أنهم كانوا عبثًا مختبئين في المنازل العشرية. لمثل هذه الحالات ، تمت إضافة التنسيق الحرفي الثنائي إلى ES6: 0b .

 const binaryZero = 0b0; const binaryOne = 0b1; const binary255 = 0b11111111; const binaryLong = 0b111101011101101; 

هذا يبسط إلى حد كبير العمل مع الأعلام الثنائية:

 // Pizza toppings const olives = 0b0001; const ham = 0b0010; const pineapple = 0b0100; const artechoke = 0b1000; const pizza_ham_pineapple = pineapple | ham; const pizza_four_seasons = olives | ham | artechoke; 

نفس الشيء مع الأرقام الثمانية. في عالم JS ، تعد هذه فرصة مناسبة ، ولكنها غالبًا ما تستخدم للشبكات وبعض تنسيقات الملفات. يمكنك كتابة الأرقام الثمانية باستخدام بناء الجملة 0o .

Number.isNaN ()

لا يجب الخلط بينه وبين window.isNaN() ، فهذه طريقة جديدة لها سلوك أكثر سهولة.

لدى isNaN الكلاسيكي بعض الحيل المثيرة للاهتمام:

 isNaN(NaN) === true isNaN(null) === false isNaN(undefined) === true isNaN({}) === true isNaN('0/0') === true isNaN('hello') === true 

ماذا يعطينا هذا؟ بادئ ذي بدء ، أي من هذه المعلمات هي في الواقع NaN . كالعادة ، تكمن المشكلة في جميع خصائص JavaScript "المفضلة": type casting. يتم تحويل الوسائط لـ window.isNaN إلى أرقام باستخدام دالة Number .

أسلوب Number.isNaN() ثابت جديد يحل هذه المشكلة. يعود مرة واحدة وإلى الأبد المساواة في الحجج التي تم تمريرها إليه و NaN . هذا واضح تماما:

 Number.isNaN(NaN) === true Number.isNaN(null) === false Number.isNaN(undefined) === false Number.isNaN({}) === false Number.isNaN('0/0') === false Number.isNaN('hello') === false 

التوقيع: Number.isNaN : (value: any) => boolean

ES2016

مشغل الأس

يحدث هذا من وقت لآخر ، لذلك من الجيد أن يكون بناء جملة حرفيًا متاحًا للتسوية:

 2**2 === 4 3**2 === 9 3**3 === 27 

غريب ، لكنني كنت متأكدًا من أن هذا موجود بالفعل في JavaScript. ربما الخلط مع بيثون.

Array.prototype.includes ()

كان من الصعب تفويتها ، ولكن إذا كنت قد كتبت array.indexOf(x) !== -1 في السنوات الثلاث الأخيرة ، array.indexOf(x) !== -1 الجديدة التي includes :

 [1, 2, 3].includes(2) === true [1, 2, 3].includes(true) === false 

includes يستخدم خوارزمية نفس القيمة صفر ، والتي تتطابق تقريبًا مع التحقق الصارم من المساواة ( === ) ، باستثناء أنه يمكن معالجة قيم NaN . تقارن هذه الخوارزمية أيضًا الكائنات بالارتباطات بدلاً من المحتويات:

 const object1 = {}; const object2 = {}; const array = [object1, 78, NaN]; array.includes(object1) === true array.includes(object2) === false array.includes(NaN) === true 

includes يمكن أن تأخذ المعلمة الثانية ، fromIndex ، والتي تتيح لك توفير قيمة التحول:

 // positions 0 1 2 3 4 const array = [1, 1, 1, 2, 2]; array.includes(1, 2) === true array.includes(1, 3) === false 

مفيدة.

التوقيع: Array.prototype.includes : (match: any, offset?: Int) => boolean

ES2017

الذاكرة المشتركة والعمليات الذرية

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

هاتان الميزتان رائعتان مع واجهات برمجة تطبيقات معقدة إلى حد ما ، لذلك لن أصفها هنا. لمزيد من التفاصيل ، أرسل لك هذا المقال: https://www.sitepen.com/blog/the-return-of-sharedarraybuffers-and-atomics/ . لا تدعم كل هذه المتصفحات هذه الميزات حتى الآن ، لكنني آمل أن يتحسن الموقف في العامين المقبلين.

ES2018

منجم ذهب من التعبيرات العادية

ES2018 لديه مجموعة كاملة من ميزات التعبير العادية الجديدة:

تطابقات Lookbehind (مطابقة مع الأحرف السابقة)

في أوقات التشغيل التي تدعم ذلك ، يمكنك الآن كتابة تعبيرات منتظمة تبحث عن الأحرف قبل المطابقة. على سبيل المثال ، للعثور على جميع الأرقام مسبوقة بعلامة الدولار:

 const regex = /(?<=\$)\d+/; const text = 'This cost $400'; text.match(regex) === ['400'] 

الأمر كله يتعلق بمجموعة lookbehind الجديدة ، ومجموعات lookahead التوأم:

 Look ahead: (?=abc) Look behind: (?<=abc) Look ahead negative: (?!abc) Look behind negative: (?<!abc) 

لسوء الحظ ، اليوم لا يمكنك ترجمة بناء الجملة lookbehind الجديد للمتصفحات القديمة ، لذلك من الممكن أنه لا يمكنك استخدامه إلا في Node لفترة من الوقت.

مجموعات الالتقاط المسماة

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

 const getNameParts = /(\w+)\s+(\w+)/g; const name = "Weyland Smithers"; const subMatches = getNameParts.exec(name); subMatches[1] === 'Weyland' subMatches[2] === 'Smithers' 

والآن يوجد بناء جملة لتسمية هذه العينات الفرعية (أو مجموعات السجلات): داخل الأقواس في البداية نضعها ?<titl> ، إذا أردنا إعطاء المجموعة اسمًا:

 const getNameParts = /(?<first>\w+)\s(?<last>\w+)/g; const name = "Weyland Smithers"; const subMatches = getNameParts.exec(name); const {first, last} = subMatches.groups first === 'Weyland' last === 'Smithers' 

لسوء الحظ ، هذا يعمل فقط على Chrome و Node الآن.

الآن يمكن النقاط النقاط خطوط جديدة

من الضروري فقط وضع علامة /s على سبيل المثال ، /someRegex./s ، /anotherRegex./sg .

ES2019

Array.prototype.flat () و flatMap ()

كنت سعيدًا جدًا برؤية ذلك على MDN.

ببساطة ، تقوم flat() بتحويل صفيف متعدد الأبعاد إلى صفيف أحادي البعد بحد أقصى عمق محدد:

 const multiDimensional = [ [1, 2, 3], [4, 5, 6], [7,[8,9]] ]; multiDimensional.flat(2) === [1, 2, 3, 4, 5, 6, 7, 8, 9] 

flatMap هي map يتبعها flat مع عمق 1. هذا مفيد إذا كنت بحاجة إلى تعيين دالة تُرجع صفيفًا ، لكنك لست بحاجة إلى أن تكون النتيجة بنية بيانات متداخلة:

 const texts = ["Hello,", "today I", "will", "use FlatMap"]; // with a plain map const mapped = texts.map(text => text.split(' ')); mapped === ['Hello', ['today', 'I'], 'will', ['use', 'FlatMap']]; // with flatmap const flatMapped = texts.flatMap(text => text.split(' ')); flatMapped === ['Hello', 'today', 'I', 'will', 'use', 'FlatMap']; 

الصيد غير محدود

يمكنك الآن كتابة تعبيرات try / catch دون الرجوع إلى أخطاء الرمي:

 try { // something throws } catch { // don't have to do catch(e) } 

بالمناسبة ، يُشار أحيانًا إلى الخطافات التي لا تأخذها في الاعتبار قيمة e باعتبارها معالجة استثناءات Pokemon . لأنه يجب عليك إلقاء القبض عليهم جميعًا!

سلسلة أساليب التشذيب القيمة

قليلا ، ولكن لطيفة:

 const padded = ' Hello world '; padded.trimStart() === 'Hello world '; padded.trimEnd() === ' Hello world';