12 حيل JavaScript غير موجودة في معظم البرامج التعليمية

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

في هذه المقالة ، سأعرض عليك 12 طريقة رائعة لتحسين وتسريع رمز JavaScript الخاص بك. في معظم الحالات ، فهي عالمية.

نذكرك: لجميع قراء "Habr" - خصم بقيمة 10،000 روبل عند التسجيل في أي دورة تدريبية في Skillbox باستخدام الرمز الترويجي "Habr".

توصي Skillbox بما يلي: دورة عملية "Mobile Developer PRO" .

تصفية قيمة فريدة من نوعها

صفائف

تم تقديم نوع الكائن Set في ES6 ، إلى جانب ... ، عامل الانتشار ، يمكننا استخدامه لإنشاء صفيف جديد يحتوي على قيم فريدة فقط.

const array = [1, 1, 2, 3, 5, 5, 1] const uniqueArray = [...new Set(array)]; console.log(uniqueArray); // Result: [1, 2, 3, 5] 

في الحالة العادية ، هناك حاجة إلى المزيد من التعليمات البرمجية لأداء نفس العملية.

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

طول ذاكرة التخزين المؤقت في الدورات

CYCLES

عندما تتعلم عن الحلقات ، فإنك تتبع الإجراء القياسي:

 for (let i = 0; i < array.length; i++){ console.log(i); } 

ومع ذلك ، مع بناء الجملة هذا ، حلقة for re-check طول الصفيف في كل التكرار.

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

 for (let i = 0, length = array.length; i < length; i++){ console.log(i); } 

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

تصنيف ماس كهربائى (تصنيف مكارثي)

المشغلين الشرطيين

المشغل الثلاثي هو وسيلة سريعة وفعالة لكتابة عبارات شرطية بسيطة (وأحيانا ليست بسيطة جدا):

س> 100؟ "أكبر من 100": "أقل من 100" ؛
س> 100؟ (x> 200؟ "أكثر من 200": "بين 100-200"): "أقل من 100" ؛

لكن في بعض الأحيان يكون المشغل الثلاثي أكثر تعقيدًا مما هو مطلوب. بدلاً من ذلك ، يمكننا استخدام 'و' && & 'أو' || العوامل المنطقية لتقييم بعض التعبيرات بطريقة أكثر إيجازًا. وغالبًا ما يطلق عليه "دائرة قصر" أو "تقييم دائرة قصر".

كيف يعمل؟

لنفترض أننا نريد إرجاع واحد فقط من شرطين أو أكثر.

باستخدام && سيعود القيمة الخاطئة الأولى. إذا تم تقييم كل المعامل إلى صواب ، فسيتم إرجاع التعبير المقيَّم الأخير.

 let one = 1, two = 2, three = 3; console.log(one && two && three); // Result: 3 console.log(0 && null); // Result: 0 

باستخدام || سيعود القيمة الحقيقية الأولى. إذا تم تقييم كل معامل إلى خطأ ، فسيتم إرجاع آخر قيمة محسوبة.

 let one = 1, two = 2, three = 3; console.log(one || two || three); // Result: 1 console.log(0 || null); // Result: null 

مثال 1

دعنا نقول أننا نريد إرجاع الطول إلى متغير ، ولكن لا نعرف نوعه.

في هذه الحالة ، يمكنك استخدام إذا كان / else للتحقق من أن foo هو نوع مناسب ، ولكن قد تكون هذه الطريقة طويلة جدًا. لذلك ، من الأفضل أن تأخذ "دائرة كهربائية قصيرة".

 return (foo || []).length; 

إذا كان للمتغير foo طول مناسب ، فسيتم إرجاعه. خلاف ذلك ، نحصل على 0.

مثال 2

هل واجهت مشاكل في الوصول إلى كائن متداخل؟ قد لا تعرف ما إذا كان كائنًا أو أحد خصائصه الفرعية موجودًا ، وقد يؤدي ذلك إلى حدوث مشكلات.

على سبيل المثال ، أردنا الوصول إلى خاصية البيانات في this.state ، لكن لم يتم تعريف البيانات حتى يعرض برنامجنا استعلامًا للتحديد.

اعتمادًا على المكان الذي نستخدمه فيه ، قد تؤدي المكالمة إلى this.state.data إلى منع التطبيق من بدء التشغيل. لحل المشكلة ، يمكننا التفاف هذا في تعبير شرطي:

 if (this.state.data) { return this.state.data; } else { return 'Fetching Data'; } 

سيكون الخيار الأكثر ملاءمة هو استخدام "أو" المشغل.

 return (this.state.data || 'Fetching Data'); 

لا يمكننا تغيير الكود أعلاه لاستخدام &&. سيعود بيان "إحضار البيانات" && this.state.data إلى this.state.data سواء كان غير معرف أم لا.

سلسلة اختياري

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

على سبيل المثال ، يمكننا إعادة تشكيل المثال أعلاه عن طريق الحصول على this.state.data؟ .. (). بمعنى ، يتم إرجاع البيانات فقط إذا كانت القيمة غير فارغة.

أو ، إذا كان من المهم تحديد الحالة أم لا ، فبإمكاننا إرجاع this.state؟ .Data.

تحويل إلى منطقية

تحويل النوع

بالإضافة إلى الوظائف المنطقية المعتادة ، صحيحة وكاذبة ، يتعامل JavaScript أيضًا مع جميع القيم الأخرى كصدق أو كاذب.

ما لم ينص على خلاف ذلك ، فإن جميع القيم في جافا سكريبت صادقة ، باستثناء 0 ، "" ، لاغية ، غير محددة ، NaN ، وبالطبع خاطئة. هذا الأخير زائف.

يمكننا التبديل بسهولة بين الاثنين باستخدام! Operator ، والذي يحول النوع أيضًا إلى منطقي.

 const isTrue = !0; const isFalse = !1; const alsoFalse = !!0; console.log(isTrue); // Result: true console.log(typeof true); // Result: "boolean" 

تحويل إلى سلسلة

تحويل النوع

يمكن إجراء تحويل سريع لعدد صحيح إلى سلسلة كما يلي.

 const val = 1 + ""; console.log(val); // Result: "1" console.log(typeof val); // Result: "string" 

التحويل إلى عدد صحيح

تحويل النوع

نقوم بإجراء التحول العكسي على النحو التالي.

 let int = "15"; int = +int; console.log(int); // Result: 15 console.log(typeof int); Result: "number" 

يمكن أيضًا استخدام هذه الطريقة لتحويل نوع البيانات المنطقية المنطقية إلى قيم رقمية عادية ، كما هو موضح أدناه:

 console.log(+true); // Return: 1 console.log(+false); // Return: 0 

قد تكون هناك مواقف حيث سيتم تفسير + على أنها عامل تسلسل بدلاً من الإضافة. لتجنب هذا ، استخدم التلدة: ~~. هذا المشغل يعادل التعبير -n-1. على سبيل المثال ، ~ 15 هو -16.

باستخدام اثنين من التلدين في صف ينفي العملية ، لأن - (- - ن - 1) - 1 = ن + 1 - 1 = ن. بمعنى آخر ، ~ -16 هي 15.

 const int = ~~"15" console.log(int); // Result: 15 console.log(typeof int); Result: "number" 

القوى السريعة

OPERATIONS

بدءاً من ES7 ، يمكنك استخدام عامل الأس * كاختصار للدرجات. هذا أسرع بكثير من استخدام Math.pow (2 ، 3). يبدو الأمر بسيطًا ، لكن هذه اللحظة مدرجة في قائمة الاستقبالات ، حيث لم يتم ذكرها في كل مكان.

 console.log(2 ** 3); // Result: 8 

لا تخلط بينه وبين الرمز ^ ، والذي يستخدم عادة للتسوية. ولكن في JavaScript ، هذا هو المشغل XOR.

قبل ES7 ، لا يمكن تطبيق الاختصار ** إلا على الدرجات ذات القاعدة 2 باستخدام عامل التحول لليسار في اتجاه bitwise <<:

 Math.pow(2, n); 2 << (n - 1); 2**n; 

على سبيل المثال ، 2 << 3 = 16 مكافئ للتعبير 2 ** 4 = 16.

تعويم عدد صحيح

عمليات / أنواع التحويل

إذا كنت بحاجة إلى تحويل تعويم إلى عدد صحيح ، يمكنك استخدام Math.floor () أو Math.ceil () أو Math.round (). ولكن هناك طريقة أسرع ، لهذا نستخدم | ، أي عامل التشغيل OR.

 console.log(23.9 | 0); // Result: 23 console.log(-23.9 | 0); // Result: -23 

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

ن | 0 يزيل كل شيء بعد الفاصل العشري ، اقتطاع رقم الفاصلة العائمة إلى عدد صحيح.

يمكنك الحصول على نفس تأثير التقريب باستخدام ~~. بعد التحويل القسري إلى عدد صحيح ، تظل القيمة دون تغيير.

نزيل الأرقام الزائدة

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

 let str = "1553"; Number(str.substring(0, str.length - 1)); 

بدلاً من ذلك ، نكتب ببساطة:

 console.log(1553 / 10 | 0) // Result: 155 console.log(1553 / 100 | 0) // Result: 15 console.log(1553 / 1000 | 0) // Result: 1 

رابط تلقائي

CLASSES

يمكن استخدام رؤوس الأسهم ES6 في أساليب الفصل ، ويكون الربط ضمنيًا. بفضل هذا ، يمكنك أن تقول وداعا لتكرار التعبيرات مثل this.myMethod = this.myMethod.bind (this)!

 import React, { Component } from React; export default class App extends Compononent { constructor(props) { super(props); this.state = {}; } myMethod = () => { // This method is bound implicitly! } render() { return ( <> <div> {this.myMethod()} </div> </> ) } }; 

صفيف التشذيب

صفائف

إذا كنت بحاجة إلى إزالة القيم من صفيف ، فهناك طرق أسرع من لصق ().

على سبيل المثال ، إذا كنت تعرف حجم الصفيف الأصلي ، فيمكنك تجاوز خاصية الطول الخاصة به كما يلي:

 let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; array.length = 4; console.log(array); // Result: [0, 1, 2, 3] 

ولكن هناك طريقة أخرى ، وأسرع. إذا كانت السرعة مهمة لك ، فإليك اختيارنا:

 let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; array = array.slice(0, 4); console.log(array); // Result: [0, 1, 2, 3] 

إخراج قيمة (قيم) الصفيف الأخير

صفائف
تتطلب هذه التقنية استخدام طريقة الشريحة ().

 let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; console.log(array.slice(-1)); // Result: [9] console.log(array.slice(-2)); // Result: [8, 9] console.log(array.slice(-3)); // Result: [7, 8, 9] 

تنسيق JSON رمز

JSON

ربما تكون قد استخدمت بالفعل JSON.stringify. هل تعلم أنه يساعد على تنسيق JSON الخاص بك؟

تقبل طريقة stringify () معلمتين اختياريتين: وظيفة المستبدل ، والتي يمكن استخدامها لتصفية JSON المعروضة ومساحة القيمة.

 console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t')); // Result: // '{ // "alpha": A, // "beta": B // }' 

هذا كل شيء ، آمل أن تكون كل هذه الحيل مفيدة. وما الحيل التي تعرفها؟ اكتبها في التعليقات.

توصي Skillbox بما يلي:

• دورة تدريبية لمدة عامين "أنا مطور ويب للمحترفين . "
• دورة عبر الإنترنت "C # Developer with 0" .
• الدورة السنوية العملية "PHP-developer من 0 إلى PRO" .