مقتطف كود JavaScript للمشاكل الشائعة

تم التحديث الأخير في 27 يوليو 2021

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

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

تلميح مقتطف شفرة جافا سكريبت: استخدم "اسمح" بدلاً من "var"

اسمحوا مثل var ولكن دعونا لها نطاق. يمكن الوصول إلى let فقط في مستوى نطاق الكتلة ، حيث يتم الإعلان عنه وتعيين قيمة له. يمكن الوصول إلى var على أي مستوى فيما يتعلق بنطاق الكتلة المحدد. في المثال التالي ، يتم تعريف المتغير "num1" داخل جملة If ولذلك لا يمكن الوصول إليه خارج الوظيفة.

 إذا كان هذا صحيحا) {
  دع العدد 1 = 40 ؛
}

دع num2 = 20 ؛

console.log (num2، num1) ؛
console.log (num1) ؛

انتاج:
20
غير معرف

 دع أ = 25 ؛
دع ب = 50 ؛

إذا كان هذا صحيحا) {
  دع أ = 100 ؛
  فار ج = 5 ؛
  console.log (أ / ج) ؛
  console.log (ب / ج) ؛
}

console.log (ج) ؛
console.log (أ) ؛

انتاج:
20
10
5
25

استخدم "const" عندما لا تتغير قيمة المتغير

يعين const قيمة ثابتة لمتغير لا يمكن تغييره. عندما يتم تعريف متغير ثابت ، يشير JavaScript إلى عنوان القيمة إلى المتغير.

وظيفة السهم في JavaScript Code Snippet ، بناء جملة جديد للوظائف

تم تغيير وظائف مقتطفات JavaScript البرمجية في ES6 إلى تعبير أبسط ، '() => {}'.

 // النحو القديم
وظيفة myHello () {
  console.log ("Hello World ..!")؛
}

// بناء الجملة الجديد
var myHello = () => {
  console.log ("Hello World ..!")؛
}

قد يكون بناء الجملة الجديد محيرًا بعض الشيء في البداية. هناك جزءان من بناء الجملة.

 var myHello = ()

يعلن الجزء الأول من JavaScript Code Snippet عن متغير ويسند إليه الوظيفة (). إنها تقول فقط المتغير هو دالة.

 => {// افعل شيئًا} 

الجزء الثاني يعلن عن جزء الجسم من الوظيفة. يحدد جزء السهم مع الأقواس المتعرجة جزء الجسم.

أمثلة أخرى ولكن مع المعلمات.

 اسمحوا withParameters = (أ ، ب) => {
  console.log (أ + ب) ؛
}

مع المعلمات (10 ، 20) ؛

انتاج:
30

 دع sumOfNum = (أ ، ب = 10) => {
  إرجاع أ + ب ؛
}

console.log (sumOfNum (20) ،
console.log (sumOfNum (20،30) ،

انتاج:
30
50

حلقة جديدة "لـ ... من ..."

لـ… of مشابه جدًا لـ… in مع تعديل طفيف. من أجل ... من التكرارات من خلال قائمة من العناصر مثل المصفوفة وإرجاع العناصر (وليس فهرسها) واحدة تلو الأخرى. لاحظ أن المتغير "num" ينتج كل عنصر في المصفوفة ، وليس الفهرس.

 دع الأرقام = [5،6،7،8] ؛

لـ (دع عدد الأرقام) {
  console.log (القيمة) ؛
}

انتاج:
5
6
7
8

 دعونا str = 'Arturo' ؛

لـ (let char of str) {
  console.log (char) ؛
}

انتاج:
أ
ص
ر
ش
ص
ا

تدمير التخصيص المتغير

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

 اسمحوا الملف الشخصي = ["جون" ، 32 ، "مهندس"] ؛

اسمح [الاسم ، العمر ، الوظيفة] = الملف الشخصي ؛

console.log (الاسم) ؛

انتاج:
جون

ابحث عن كائن محدد في مصفوفة كائنات

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

 دع الموظفين = [
  {id: 0، name: 'Nina'}،
  {id: 1، name: 'Kevin'}،
  {المعرف: 2 ، الاسم: "جون"}
]

دع الموظف = staff.find (emp => emp.name === 'John') ؛

console.log (العميل) ؛

انتاج:
{المعرف: 2 ، الاسم: "جون"}

التكرار الحلقي فوق مفاتيح الكائن والقيم

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

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

 دع myObject = {Peter: 15، John: 20، Anne: 35} ؛

Object.keys (myObject). forEach ((مفتاح ، قيمة) => {
  //...قم بعمل ما
  console.log (مفتاح ، قيمة) ؛
}) ؛

انتاج:
بطرس 15
يوحنا 20
آن 35

قم بتصفية مصفوفة كائنات بناءً على شرط

في بعض الأحيان لدينا مجموعة كبيرة من البيانات التي نريد تصفية العناصر بناءً على حالة معينة. يمكننا وظيفة التصفية لإنجاز هذا. يحتوي الحل التالي على مجموعة من مسارات الملفات. توجد بعض الملفات في الدليل "data1" بينما توجد ملفات أخرى في الدليل "data2". لنفكر أننا نريد التصفية لدليل محدد فقط:

 ترك الموقع = [
  "ملفات / بيانات 1 / ملف" ،
  "files / data1 / file2" ،
  "ملفات / بيانات 2 / ملف" ،
  "الملفات / data2 / file2"
] ؛

دع عامل التصفية = location.filter (المسار => المسار.يتضمن ('data2')) ؛

console.log (مرشح) ؛

انتاج:
['files / dir2 / file'، 'files / dir2 / file2']

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

قم بتعيين مفاتيح لكائن بنفس الاسم

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

 اسمحوا الاسم = 'جون' ؛
دع العمر = 32 ؛
دع الوظيفة = "مهندس" ؛

// بدلا من هذا
اسمح لملف التعريف 1 = {الاسم: الاسم ، العمر: العمر ، الوظيفة: الوظيفة} ؛

// افعل هذا
اسمح لملف التعريف 2 = {الاسم ، العمر ، الوظيفة} ؛

console.log (الملف الشخصي 2) ؛

انتاج:
{الاسم: "جون" ، العمر: 32 ، الوظيفة: "مهندس"}

استخدام عامل فروق الأسعار ES6 "..."

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

في المثال الأول ، نوضح كيف يعمل عامل الانتشار على مصفوفة ويحول كل عنصر إلى عنصر فردي.

 دع الأرقام 1 = [1،2،3،4،5] ؛

console.log (... number1) ؛

انتاج:
1 2 3 4 5

يدمج المثال الثاني محتويات مصفوفتين من خلال إنشاء مصفوفة مؤقتة جديدة تحتوي على كلا المحتوىين.

 دع الأرقام 2 = [6،7،8،9،10] ؛

دعونا مجتمعة = [... أرقام 1 ، ... أرقام 2] ؛

console.log (... مجتمعة) ؛

انتاج:
1 2 3 4 5 6 7 8 9 10

يوضح المثال الأخير كيف يمكن لعامل الانتشار أن يحول مصفوفة إلى قائمة من الوسائط لوظيفة ما. تُرجع Math.max أكبر رقم في قائمة الوسائط التي تم تمريرها إليها. كانت إحدى هذه الحجج 10 ، وهي الأعلى.

 دع الأرقام 1 = [1،2،3،4،5] ؛

دع الأرقام 2 = [6،7،8،9،10] ؛

دعونا مجتمعة = [... أرقام 1 ، ... أرقام 2] ؛

console.log (Math.max (... مجتمعة)) ؛

انتاج:
10

وظائف Getters and Setters الجديدة

تعتبر أدوات الاستلام والمُعيِّن إحدى الميزات المفيدة التي تم تقديمها في ES6. يكون مفيدًا إذا كنا نستخدم فئات في JavaScript.

 فئة PersonName {
  المنشئ (الاسم) {
    this.name = name ؛
  }
  الحصول على الاسم () {
    إرجاع this.name ؛
  }
  تعيين الاسم (الاسم) {
    this.name = name ؛
  }
}

دع الشخص = اسم مستخدم جديد ("جون سنو") ؛
console.log (اسم الشخص) ؛ // (أ)

person.Name = "داني" ؛ // (ب)
console.log (اسم الشخص) ؛

انتاج:
جون سنو
داني

يمكننا أن نرى أن هناك وظيفتين داخل الفئة PersonName مع خصائص 'get' و 'set'. يتم استخدام خاصية "get" للحصول على قيمة المتغير ، ويتم استخدام خاصية "set" لتعيين القيمة إلى المتغير. يمكننا أن نرى أيضًا أن وظيفة الحصول على الاسم (A) تُستدعى بدون أقواس ، وأن وظيفة تعيين الاسم (B) تُستدعى بدون أقواس ، وهي تشبه تمامًا تعيين قيمة للمتغير.