20 من مهارات JS لمساعدتك على تحسين كفاءة العمل وعدم العمل لساعات إضافية مرة أخرى!

في مهامنا اليومية، نكتب وظائف مثل الفرز والبحث والعثور على قيم فريدة وتمرير المعلمات وتبادل القيم وما إلى ذلك، لذا قمت هنا بتجميع قائمة بنصائحي المختصرة!

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

ستساعدك هذه الطرق بالتأكيد على:

• تقليل عدد LOC (أسطر التعليمات البرمجية)، أو
• مسابقات البرمجة، أو
• hackathons
• أو غيرها من المهام المحدودة المدة.

تستخدم معظم أدوات JavaScript Hacks ECMAScript6 (ES2015) والتقنيات الأحدث، على الرغم من أن الإصدار الأخير هو ECMAScript11 (ES2020).

==ملاحظة==: تم اختبار جميع النصائح أدناه على وحدة تحكم Google Chrome.

1. قم بتعريف المصفوفة وتهيئتها

يمكننا تهيئة مصفوفة ذات حجم معين باستخدام قيمة افتراضية (مثل "" أو null أو 0). ربما تكون تستخدم هذه العناصر بالفعل لمصفوفات أحادية الأبعاد، ولكن كيف يمكنك تهيئة مصفوفة/مصفوفة ثنائية الأبعاد؟

مصفوفة ثابتة = Array(5).fill(''); 
// الإخراج (5) [""، ""، ""، ""، ""]

مصفوفة ثابتة = Array(5).fill(0).map(()=>Array(5).fill(0)); 
// الإخراج (5) [مصفوفة (5)، مصفوفة (5)، مصفوفة (5)، مصفوفة (5)، مصفوفة (5)]
0: (5) [0، 0، 0، 0، 0]
1: (5) [0، 0، 0، 0، 0]
2: (5) [0، 0، 0، 0، 0]
3: (5) [0، 0، 0، 0، 0]
4: (5) [0، 0، 0، 0، 0]
الطول: 5

2. ابحث عن المجموع والحد الأدنى والحد الأقصى للقيم

يجب أن نستخدم طريقة reduce للعثور بسرعة على العمليات الرياضية الأساسية.

مصفوفة ثابتة = [5,4,7,8,9,2];

• و

array.reduce((a,b) => a+b);
// الإخراج: 35

• الحد الأقصى

array.reduce((a,b) => a>b?a:b);
// الإخراج:

• الحد الأدنى

array.reduce((a,b) => a<b?a:b);
// الإخراج: 2

3. فرز مصفوفات السلاسل أو الأرقام أو الكائنات

لدينا طرق مدمجة sort() reverse() لفرز السلاسل، ولكن ماذا عن مصفوفات الأرقام أو الكائنات؟

دعونا نلقي نظرة على تقنيات الفرز التصاعدي والتنازلي للأرقام والأشياء.

• فرز مصفوفة السلسلة

const stringArr = ["Joe"، "Kapil"، "Steve"، "Musk"]
stringArr.sort();
// الإخراج (4) ["جو"، "كابيل"، "مسك"، "ستيف"]

stringArr.reverse();
// الإخراج (4) ["Steve"، "Musk"، "Kapil"، "Joe"]

• مصفوفة أرقام مرتبة

const array = [40, 100, 1, 5, 25, 10];
array.sort((a,b) => ab);
// الإخراج (6) [1، 5، 10، 25، 40، 100]

array.sort((a,b) => ba);
// الإخراج (6) [100، 40، 25، 10، 5، 1]

• فرز مصفوفة الكائنات

const objectArr = [
     { الاسم الأول: 'لازلو'، الاسم الأخير: 'جامف' }،
     { الاسم الأول: "خنزير"، الاسم الأخير: "بودين" }،    
     { الاسم الأول: "القرصان"، الاسم الأخير: "برينتيس" }
];
objectArr.sort((a, b) => a.last_name.localeCompare(b.last_name));
// الإخراج (3) [{...}، {...}، {...}]
0: {الاسم_الأول: "خنزير"، الاسم الأخير: "بودين"}
1: {الاسم_الأول: "لازسلو"، الاسم الأخير: "جمف"}
2: {الاسم الأول: "القرصان"، الاسم الأخير: "برينتيس"}
length: 3

4. قم بتصفية القيم الخاطئة من المصفوفة.

يمكن حذف القيم الزائفة مثل 0 , undefined , null , false , "" , '' بسهولة بواسطة

const array = [3, 0, 6, 7, '' ، خطأ شنيع]؛
array.filter(Boolean);
// الإخراج (3) [3، 6، 7]

5. استخدم العوامل المنطقية لحالات مختلفة

إذا كنت تريد تقليل الحالات المتداخلة if...else أو تبديل الحالات، يمكنك ببساطة استخدام العوامل المنطقية الأساسية AND/OR .

وظيفة افعل شيئا (arg1) { 
    arg1 = arg1 ||.10; 
// اضبط arg1 على 10 كإعداد افتراضي إذا لم يتم تعيينه بالفعل return arg1;
}

دع فو = 10؛  
foo === 10 && doSomething(); 
// هو نفس الشيء كما لو كان (foo == 10) ثم doSomething();
// الإخراج: 10

foo === 5 ||.doSomething();
// هو نفس الشيء كما لو كان (foo != 5) ثم doSomething();
// الإخراج: 10

6. إزالة القيم المكررة

ربما تكون قد استخدمت indexOf() مع حلقة for التي تُرجع أول فهرس تم العثور عليه أو الأحدث includes() الذي يُرجع صواب/خطأ منطقي من مصفوفة للعثور على/إزالة التكرارات. هذا هو المكان الذي لدينا فيه طريقتان أسرع.

صفيف ثابت = [5,4,7,8,9,2,7,5];
array.filter((item,idx,arr) => arr.indexOf(item) === idx);
// أو
constnonUnique = [...new Set(array)];
// الإخراج: [5، 4، 7، 8، 9، 2]

7. إنشاء كائن مضاد أو خريطة

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

Let string = 'kapilalipak';

جدول ثابت = {}؛ 
ل(دع شار السلسلة) {
  table[char]=table[char]+1 ||.
}
// الإخراج {k: 2, a: 3, p: 2, i: 2, l: 2}

و

const countMap = new Map();
  لـ (دع i = 0; i < string.length; i++) {
    إذا (countMap.has(سلسلة[i])) {
      countMap.set(string[i], countMap.get(string[i]) + 1);
    } آخر {
      countMap.set(string[i], 1);
    }
  }
// خريطة الإخراج (5) {"k" => 2, "a" => 3, "p" => 2, "i" => 2, "l" => 2}

8. المشغل الثلاثي مهم جدًا

يمكنك تجنب الشروط المتداخلة باستخدام عامل التشغيل الثلاثي if…elseif…elseif

.

وظيفة الحمى (درجة الحرارة) {
    درجة حرارة الإرجاع> 97؟ "زيارة الطبيب!"
      : درجة الحرارة < 97 ? "اخرج والعب!!"
      : درجة الحرارة === 97 ? 'خذ بعض الراحة!';
}

// حمى الإخراج (97): "خذ قسطًا من الراحة!" 
Fever(100): "قم بزيارة الطبيب!"

9. الحلقة for أسرع مقارنة بالحلقة القديمة

• for and for..in حيث تمنحك فهرسًا بشكل افتراضي، ولكن يمكنك استخدام arr[index].
• for..in يقبل أيضًا غير الأرقام، لذا تجنبها.
• forEach ، for...of على العناصر مباشرة.
• يمكن أن يوفر لك forEach فهرسًا أيضًا، لكن for...of لا يمكن ذلك.
• for ومن for...of ضع في اعتبارك الثقوب الموجودة في المصفوفة، ولكن ليس الأخرى 2.

10. دمج كائنين

نحتاج عادةً إلى دمج كائنين متعددين في المهام اليومية.

مستخدم ثابت = { 
 الاسم: "كابيل راغوانشي"، 
 الجنس: "ذكر" 
 };
كلية كونست = { 
 المرحلة الابتدائية: "مدرسة ماني الابتدائية"، 
 الثانوية: 'مدرسة لاس الثانوية' 
 };
المهارات الثابتة = { 
 البرمجة: "المتطرفة"، 
 السباحة: "متوسط"، 
 النوم: "برو" 
 };

ملخص ثابت = {...مستخدم، ...كلية، ...مهارات}؛

// جنس الإخراج: "ذكر"
الاسم: "كابيل راغوانشي"
الابتدائية: "مدرسة ماني الابتدائية"
البرمجة: "المتطرفة"
الثانوية : "مدرسة لاس الثانوية"
النوم: "برو"
السباحة: "متوسط"

11. وظائف السهم

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

شخص ثابت = {
الاسم: "كابيل"،
قل الاسم () {
    إرجاع هذا. الاسم؛
    }
}
person.sayName();
// إخراج "Kapil"

لكن

const person = {
الاسم: "كابيل"،
قل الاسم : () => {
    إرجاع هذا. الاسم؛
    }
}
person.sayName();
// الإخراج ""

12.

تسلسل اختياري تسلسل اختياري؟ هل يتوقف عن التقييم إذا كانت القيمة تأتي قبل ?. غير محدد أو فارغ ويعود

غير محدد.
مستخدم ثابت = {
  موظف: {
    الاسم: "كابيل"
  }
};
user.employee?.name;
// الإخراج: "كابيل"
user.employ?.name;
// الإخراج: غير محدد
user.employ.name
// الإخراج: VM21616:1 خطأ TypeError: لا يمكن قراءة الخاصية 'name' غير المحددة

13.

استخدم طريقة Math.random() المضمنة لخلط المصفوفة.

قائمة ثابتة = [1، 2، 3، 4، 5، 6، 7، 8، 9]؛
قائمة الفرز(() => {
    إرجاع Math.random() - 0.5؛
});
// الإخراج (9) [2، 5، 1، 6، 9، 8، 4، 3، 7]
// اتصل به مرة أخرى
(9) [4، 1، 7، 5، 3، 8، 2، 9، 6]

14.

عامل الدمج الفارغ (؟؟) هو عامل منطقي، عندما يكون المعامل الأيسر فارغًا أو غير محدد، يُرجع قيمة المعامل الأيمن، وإلا فسيتم إرجاع المعامل الأيسر.

const foo = null "مدرستي";
// الإخراج: "مدرستي"

كونست باز = 0 ؟؟ 42؛
// الإخراج: 0

15. مشغل الراحة والانتشار

تلك النقاط الثلاث الغامضة ... يمكنها الراحة أو الانتشار! الدالة

myFun(a, b, ...manyMoreArgs) {
   إرجاع الوسائط. الطول؛
}
myFun("واحد"، "اثنان"، "ثلاثة"، "أربعة"، "خمسة"، "ستة");

// الإخراج: 6

وأجزاء

ثابتة = ['أكتاف', 'ركبتين']; 
كلمات const = ['head', ...parts, 'and', 'toes']; 

كلمات؛
//الإخراج: 
(5) ["الرأس"، "الكتفين"، "الركبتين"، "و"، "أصابع القدم"]

16. المعلمة الافتراضية

const search = (arr, low=0,high=arr.length-1) => {
    عودة عالية
}
بحث([1,2,3,4,5]);

// الإخراج: 4

17. تحويل النظام العشري إلى ثنائي أو سداسي عشري

أثناء حل المشكلة، يمكننا استخدام بعض الطرق المضمنة مثل .toPrecision() أو .toFixed() لتنفيذ العديد من الوظائف المساعدة.

رقم ثابت = 10؛

num.toString(2);
// الإخراج: "1010"
num.toString(16);
// الإخراج: "أ"
num.toString(8);
// الإخراج: "12"

18. استخدم التدمير لتبادل قيمتين ببساطة

Let a = 5;
دع ب = 8؛
[أ، ​​ب] = [ب، أ]

[أ، ​​ب]
// Output(2) [8, 5]

19. تحقق من متناظر السطر الواحد

حسنًا، هذه ليست نصيحة مختصرة كاملة، ولكنها ستمنحك فكرة جيدة عن كيفية استخدام السلاسل.

وظيفة التحقق من Palindrome (شارع) {
  return str == str.split('').reverse().join('');
}
checkPalindrome('naman');
// الإخراج: صحيح

20. تحويل خصائص الكائن إلى صفائف الخصائص

باستخدام Object.entries()، Object.keys() وObject.values()
const obj = { a: 1, b: 2, c: 3 };

Object.entries(obj);
// الإخراج (3) [مصفوفة (2)، مصفوفة (2)، مصفوفة (2)]
0: (2) ["أ"، 1]
1: (2) ["ب"، 2]
2: (2) ["ج"، 3]
الطول: 3

Object.keys(obj);
(3) ["أ"، "ب"، "ج"]

Object.values(obj);
(3) [1، 2، 3]