12 حيلة جافا سكريبت لا تغطيها معظم البرامج التعليمية

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

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

نذكر: لجميع قراء "Habr" - خصم 10 روبل عند التسجيل في أي دورة 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]

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

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

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

دورات

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

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

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

قد يكون هذا مفيدًا في بعض الأحيان، ولكن في معظم الحالات يكون التخزين المؤقت لطول المصفوفة أكثر كفاءة، الأمر الذي سيتطلب وصولاً واحدًا إليه. يمكننا القيام بذلك عن طريق تعريف متغير الطول حيث نحدد المتغير 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

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

في هذه الحالة، يمكنك استخدام if/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.

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

نوع التحويل

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

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

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

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;
 
console.log(true); // 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.

استخدام مدتين على التوالي يلغي العملية لأن - (- - n - 1) - 1 = n + 1 - 1 = n. بمعنى آخر، ~-16 يساوي 15.

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

<Quick Powers

عمليات

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

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

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

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

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

الربط التلقائي

الطبقات

يمكن استخدام تدوينات أسهم 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>
      </>
    )
  }
};

تقليم المصفوفة

المصفوفات

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

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

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 من 0".
• دورة سنة عملية "مطور PHP من 0 إلى PRO".

المصدر: www.habr.com