دليل JavaScript الجزء 5: المصفوفات والحلقات

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

→ الجزء الأول: البرنامج الأول وميزات اللغة والمعايير
→ الجزء الثاني: نمط الكود وهيكل البرنامج
→ الجزء الثالث: المتغيرات وأنواع البيانات والتعبيرات والكائنات
→ الجزء 4: الميزات
→ الجزء الخامس: المصفوفات والحلقات
← الجزء السادس: الاستثناءات ، الفاصلة المنقوطة ، حرفية أحرف البدل
→ الجزء 7: الوضع الصارم ، هذه الكلمة الرئيسية ، والأحداث ، والوحدات ، والحسابات الرياضية
→ الجزء الثامن: نظرة عامة على ميزات ES6
→ الجزء التاسع: نظرة عامة على معايير ES7 و ES8 و ES9

المصفوفات

تتطور المصفوفات ، كائنات من النوع Array ، إلى جانب آليات أخرى للغة. إنها قوائم قيم مرقمة.

يحتوي العنصر الأول من الصفيف على فهرس (مفتاح) من 0 ؛ يتم استخدام هذا النهج في العديد من لغات البرمجة.

في هذا القسم سننظر في الأساليب الحديثة للعمل مع المصفوفات.

▍ تهيئة الصفائف

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

 const a = [] const a = [1, 2, 3] const a = Array.of(1, 2, 3) const a = Array(6).fill(1) //   ,   6 ,  1 

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

 const a = [1, 2, 3] console.log(a) //[ 1, 2, 3 ] const first = a[0] console.log(first) //1 a[0] = 4 console.log(a) //[ 4, 2, 3 ] 

لا يُنصح باستخدام منشئ Array للإعلان عن المصفوفات.

 const a = new Array() //  const a = new Array(1, 2, 3) //  

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

▍الحصول على طول المصفوفة

لمعرفة طول المصفوفة ، تحتاج إلى الرجوع إلى خاصية length الخاصة بها.

 const l = a.length 

heck التحقق من مصفوفة باستخدام طريقة كل ()

يمكن استخدام طريقة المصفوفة every() لتنظيم التحقق من جميع عناصرها باستخدام شرط معين. إذا استوفت جميع عناصر المصفوفة الشرط ، فستعود الدالة true ، وإلا فإنها سترجع false .

يتم تمرير هذه الطريقة وظيفة تأخذ الوسيطتين currentValue (عنصر الصفيف الحالي) ، index (فهرس عنصر الصفيف الحالي) currentValue (الصفيف نفسه). يمكن أن يأخذ أيضًا قيمة اختيارية ، تُستخدم على this النحو عند تنفيذ الوظيفة التي تم تمريرها إليها.
على سبيل المثال ، تحقق مما إذا كانت قيم جميع عناصر المصفوفة أكبر من 10.

 const a = [11, 12, 13] const b = [5, 6, 25] const test = el => el > 10 console.log(a.every(test)) //true console.log(b.every(test)) //false 

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

▍ التحقق من مصفوفة باستخدام طريقة some ()

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

▍قم بإنشاء مصفوفة بناءً على مصفوفة موجودة باستخدام طريقة map ()

تتيح لك طريقة المصفوفات map() تكرار المصفوفات ، وتطبيق وظيفة تحول العنصر إلى كل عنصر تم تمريره إلى هذه الطريقة وإنشاء مصفوفات جديدة من القيم المستلمة. هنا ، على سبيل المثال ، هي كيفية الحصول على مصفوفة جديدة ، والتي هي نتيجة لضرب جميع عناصر المصفوفة الأصلية في 2.

 const a = [1, 2, 3] const double = el => el * 2 const doubleA = a.map(double) console.log(a) //[ 1, 2, 3 ] console.log(doubleA) //[ 2, 4, 6 ] 

▍ تصفية مصفوفة باستخدام طريقة المرشح ()

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

▍ طريقة التخفيض ()

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

 const a = [1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => { return accumulator * currentValue }, 1) console.log(a) //24 // 1: 1 * 1 = 1 // 2: 1 * 2 = 2 // 3: 2 * 3 = 6 // 4: 6 * 4 = 24 

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

▍ تعداد مصفوفة باستخدام طريقة forEach ()

يمكن استخدام طريقة المصفوفات forEach() للتكرار عبر قيم المصفوفات forEach() إجراءات معينة عليها ، يتم تحديدها من خلال الوظيفة التي يتم تمريرها إلى الطريقة. على سبيل المثال ، نعرض ، في كل مرة ، عناصر المصفوفة في وحدة التحكم.

 const a = [1, 2, 3] a.forEach(el => console.log(el)) //1 //2 //3 

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

elect تحديد مصفوفة باستخدام عامل التشغيل for ...

ظهر عامل for...of في معيار ES6. يسمح لك بالتكرار على كائنات قابلة للتكرار (بما في ذلك المصفوفات). إليك كيفية استخدامه.

 const a = [1, 2, 3] for (let v of a) { console.log(v) } //1 //2 //3 

عند كل تكرار للحلقة ، يدخل العنصر التالي للصفيف a في المتغير v .

▍ تعداد مصفوفة باستخدام العبارة for

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

 const a = [1, 2, 3] for (let i = 0; i < a.length; i += 1) { console.log(a[i]) } //1 //2 //3 

إذا كنت بحاجة إلى تخطي التكرار أثناء تنفيذ الحلقة ، يمكنك استخدام الأمر " continue . لإنهاء الدورة قبل الأوان ، يمكنك استخدام الأمر break . إذا كنت تستخدم أمر return في حلقة ، على سبيل المثال ، تقع في وظيفة معينة ، فستنتهي الحلقة والوظيفة ، وستنتقل القيمة التي يتم إرجاعها مع return إلى حيث تم استدعاء الوظيفة.

▍ الطريقةiterator

ظهرت هذه الطريقة في معيار ES6. يسمح لك بالحصول على ما يسمى "مكرر كائن" - وهو كائن يسمح لك في هذه الحالة بتنظيم تكرار لعناصر المصفوفة. يمكن الحصول على مكرر صفيف باستخدام الرمز (تسمى هذه الرموز "الرموز المعروفة") Symbol.iterator . بعد تلقي المكرر ، يمكنك الوصول إلى طريقته next() ، والتي ، مع كل مكالمة ، تقوم بإرجاع بنية بيانات تحتوي على العنصر التالي للصفيف.

 const a = [1, 2, 3] let it = a[Symbol.iterator]() console.log(it.next().value) //1 console.log(it.next().value) //2 console.log(it.next().value) //3 

إذا قمت باستدعاء الطريقة next() بعد الوصول إلى العنصر الأخير من المصفوفة ، فسوف تعود ، كقيمة العنصر ، undefined . يحتوي الكائن الذي تم إرجاعه بواسطة الأسلوب next() على value والخصائص done . done تقييم الخاصية التي تم done على أنها false حتى يتم الوصول إلى العنصر الأخير من الصفيف. في حالتنا ، إذا نسميها it.next() للمرة الرابعة ، فسوف تُرجع الكائن { value: undefined, done: true } ، بينما في المكالمات الثلاثة السابقة سيبدو هذا الكائن مثل { value: , done: false } .

تُرجع طريقة الصفيف entries() مكررًا يسمح لك بالتكرار عبر أزواج قيمة المفتاح للصفيف.

 const a = [1, 2, 3] let it = a.entries() console.log(it.next().value) //[0, 1] console.log(it.next().value) //[1, 2] console.log(it.next().value) //[2, 3] 

تتيح لك طريقة keys() التكرار فوق مفاتيح المصفوفة.

 const a = [1, 2, 3] let it = a.keys() console.log(it.next().value) //0 console.log(it.next().value) //1 console.log(it.next().value) //2 

Elementsإضافة عناصر إلى نهاية مصفوفة

لإضافة عناصر إلى نهاية المصفوفة ، استخدم طريقة push() .

 a.push(4) 

elementsإضافة عناصر إلى بداية المصفوفة

لإضافة عناصر إلى بداية المصفوفة ، استخدم الأسلوب unshift() .

 a.unshift(0) a.unshift(-2, -1) 

elementsإزالة عناصر المصفوفة

يمكنك إزالة عنصر من نهاية المصفوفة أثناء إرجاع هذا العنصر باستخدام طريقة pop() .

 a.pop() 

وبالمثل ، باستخدام طريقة shift() ، يمكنك إزالة عنصر من بداية المصفوفة.

 a.shift() 

نفس الشيء ، ولكن يشير بالفعل إلى موضع إزالة العناصر وعددها ، يتم باستخدام طريقة splice() .

 a.splice(0, 2) //    2     a.splice(3, 2) //    2 ,    3 

emإزالة عناصر الصفيف وإدراج عناصر أخرى بدلاً من ذلك

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

على سبيل المثال ، نحذف هنا 3 عناصر من الصفيف بدءًا من الفهرس 2 ، وبعد ذلك نضيف عنصرين آخرين إلى نفس المكان:

 const a = [1, 2, 3, 4, 5, 6] a.splice(2, 3, 'a', 'b') console.log(a) //[ 1, 2, 'a', 'b', 6 ] 

▍ الجمع بين صفائف متعددة

لدمج صفائف متعددة ، يمكنك استخدام طريقة concat() ، التي تُرجع مصفوفة جديدة.

 const a = [1, 2] const b = [3, 4] const c = a.concat(b) console.log(c) //[ 1, 2, 3, 4 ] 

itemsالعثور على العناصر في صفيف

في معيار ES5 ، ظهرت طريقة indexOf() ، والتي تُرجع فهرس التواجد الأول لعنصر الصفيف المطلوب. إذا تعذر العثور على العنصر في الصفيف ، يتم إرجاع -1 .

 const a = [1, 2, 3, 4, 5, 6, 7, 5, 8] console.log(a.indexOf(5)) //4 console.log(a.indexOf(23)) //-1 

تُرجع طريقة lastIndexOf() فهرس التواجد الأخير للعنصر في الصفيف ، أو -1 إذا لم يتم العثور على العنصر.

 const a = [1, 2, 3, 4, 5, 6, 7, 5, 8] console.log(a.lastIndexOf(5)) //7 console.log(a.lastIndexOf(23)) //-1 

في ES6 ، ظهرت طريقة find() للمصفوفات ، والتي تبحث في المصفوفة باستخدام الوظيفة التي تم تمريرها إليها. إذا أعادت الدالة true ، فستُرجع الطريقة قيمة العنصر الأول الذي تم العثور عليه. إذا تعذر العثور على العنصر ، undefined الوظيفة undefined .

قد يبدو استخدامه على النحو التالي.

 a.find(x => x.id === my_id) 

هنا ، في مصفوفة تحتوي على كائنات ، يتم البحث عن عنصر ، وخاصية معرفه تساوي الخاصية المحددة.

findIndex() طريقة findIndex() أسلوب find() ، لكنها تُرجع فهرس العنصر الموجود أو undefined .

ظهرت طريقة include includes() في ES7 ، مما يسمح لك بالتحقق من وجود عنصر معين في مصفوفة. تقوم بإرجاع true أو false ، إيجاد أو عدم العثور على عنصر يهم المبرمج.

 a.includes(value) 

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

 a.includes(value, i) 

▍ الحصول على جزء من صفيف

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

 const a = [1, 2, 3, 4, 5, 6, 7, 8, 9] console.log(a.slice(4)) //[ 5, 6, 7, 8, 9 ] console.log(a.slice(3,7)) //[ 4, 5, 6, 7 ] 

arraySort صفيف

لتنظيم فرز عناصر الصفيف بترتيب أبجدي ( 0-9A-Za-z ) ، يتم استخدام طريقة sort() بدون تمرير الوسائط إليها.

 const a = [1, 2, 3, 10, 11] a.sort() console.log(a) //[ 1, 10, 11, 2, 3 ] const b = [1, 'a', 'Z', 3, 2, 11] b.sort() console.log(b) //[ 1, 11, 2, 3, 'Z', 'a' ] 

يمكنك تمرير دالة إلى هذه الطريقة لتعيين ترتيب الفرز. تقبل الدالة ، للمقارنة بين عنصرين ، المعلمتين a و b . تقوم بإرجاع رقم سالب إذا كان a أقل من b بمعيار ما ، 0 إذا كانت متساوية ، ورقم موجب إذا كان a أكبر من b . عند كتابة دالة مشابهة لفرز المصفوفات الرقمية ، يمكنها إرجاع نتيجة طرح a و b . لذا ، فإن إرجاع نتيجة تقييم التعبير a - b يعني فرز المصفوفة بترتيب تصاعدي ، وإرجاع نتيجة تقييم التعبير b - a سوف يقوم بفرز المصفوفة بترتيب تنازلي.

 const a = [1, 10, 3, 2, 11] console.log(a.sort((a, b) => a - b)) //[ 1, 2, 3, 10, 11 ] console.log(a.sort((a, b) => b - a)) //[ 11, 10, 3, 2, 1 ] 

من أجل عكس تسلسل عناصر الصفيف ، يمكنك استخدام طريقة reverse() . يقوم ، مثل sort() ، بتعديل الصفيف الذي يطلق عليه.

▍ الحصول على تمثيل سلسلة من صفيف

للحصول على تمثيل سلسلة لصفيف ، يمكنك استخدام أسلوبه toString() .

 a.toString() 

يتم الحصول على نتيجة مشابهة بواسطة طريقة join() ، التي تسمى بدون وسيطات.

 a.join() 

إليها ، كحجة ، يمكنك تمرير عناصر الفاصل.

 const a = [1, 10, 3, 2, 11] console.log(a.toString()) //1,10,3,2,11 console.log(a.join()) //1,10,3,2,11 console.log(a.join(', ')) //1, 10, 3, 2, 11 

copiesإنشاء نسخ من المصفوفات

لإنشاء نسخة من الصفيف عن طريق نسخ قيم الصفيف الأصلي إلى الصفيف الجديد ، يمكنك استخدام طريقة Array.from() . كما أنها مناسبة لإنشاء صفائف من كائنات تشبه المصفوفة (من السلاسل ، على سبيل المثال).

 const a = 'a string' const b = Array.from(a) console.log(b) //[ 'a', ' ', 's', 't', 'r', 'i', 'n', 'g' ] 

يمكن أيضًا استخدام طريقة Array.of() لنسخ المصفوفات ، وكذلك "لتجميع" المصفوفات من عناصر مختلفة. على سبيل المثال ، لنسخ عناصر مصفوفة إلى أخرى ، يمكنك استخدام البناء التالي.

 const a = [1, 10, 3, 2, 11] const b = Array.of(...a) console.log(b) // [ 1, 10, 3, 2, 11 ] 

copyWithin() طريقة copyWithin() لنسخ عناصر الصفيف إلى مكان معين من هذا الصفيف نفسه. تحدد الوسيطة الأولى الفهرس الأولي لموضع الهدف ، والثاني الفهرس الأولي لموضع مصدر العنصر ، والمعلمة الثالثة ، الاختيارية ، تشير إلى الفهرس النهائي لموضع مصدر العنصر. إذا لم تحدده ، فسيتم نسخ كل شيء إلى الموقع المحدد في المصفوفة ، من الفهرس الأولي لموضع المصدر إلى نهاية المصفوفة.

 const a = [1, 2, 3, 4, 5] a.copyWithin(0, 2) console.log(a) //[ 3, 4, 5, 4, 5 ] 

دورات

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

▍ للحلقة

فكر في مثال لتطبيق هذه الدورة.

 const list = ['a', 'b', 'c'] for (let i = 0; i < list.length; i++) { console.log(list[i]) //,     console.log(i) // } 

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

▍ لكل دورة

ناقشنا أيضا هذه الدورة. فيما يلي مثال على التكرار عبر مصفوفة باستخدامه.

 const list = ['a', 'b', 'c'] list.forEach((item, index) => { console.log(item) // console.log(index) // }) //     ,      list.forEach(item => console.log(item)) 

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

▍ افعل ... بينما حلقة

هذه هي "دورة ما بعد الحالة". سيتم تنفيذ هذه الحلقة مرة واحدة على الأقل قبل التحقق من شرط إنهاء الحلقة.

 const list = ['a', 'b', 'c'] let i = 0 do { console.log(list[i]) // console.log(i) // i = i + 1 } while (i < list.length) 

يمكن مقاطعته باستخدام الأمر break ، يمكنك المتابعة إلى التكرار التالي باستخدام الأمر Continue.

▍ بينما حلقة

هذه هي "الدورة المسبقة". إذا كانت شرط استمرار الدورة عند مدخل الدورة خاطئة ، فلن يتم تنفيذها مرة واحدة.

 const list = ['a', 'b', 'c'] let i = 0 while (i < list.length) { console.log(list[i]) // console.log(i) // i = i + 1 } 

▍ من أجل ... في الحلقة

تسمح لك هذه الحلقة بالتكرار على جميع الخصائص المعدودة لكائن بأسمائها.

 let object = {a: 1, b: 2, c: 'three'} for (let property in object) { console.log(property) //  console.log(object[property]) //  } 

for دورة ... من

تجمع دورة for...of بين راحة دورة forEach والقدرة على مقاطعة عملها باستخدام الأدوات العادية.

 //  for (const value of ['a', 'b', 'c']) { console.log(value) // } //       `entries()` for (const [index, value] of ['a', 'b', 'c'].entries()) { console.log(index) // console.log(value) // } 

لاحظ أنه هنا ، في رأس الحلقة ، يتم استخدام كلمة أساسية const ، وليس كما قد تتوقع. إذا كانت المتغيرات داخل كتلة الحلقة لا تحتاج إلى إعادة تعيينها ، فإن const مناسب تمامًا بالنسبة لنا.
إذا قارنا for...in and for...of loops ، فإنه يتبين أنه for...in التكرارات على أسماء الخصائص ، و for...of - قيم الخصائص.

الحلقات والنطاقات

مع الحلقات والنطاقات المتغيرة ، هناك ميزة JavaScript واحدة يمكن أن تسبب للمطور بعض المشاكل. من أجل التعامل مع هذه المشاكل ، let نتحدث عن الحلقات ، عن النطاقات ، وعن var let الكلمات الرئيسية.

تأمل في مثال.

 const operations = [] for (var i = 0; i < 5; i++) { operations.push(() => {   console.log(i) }) } for (const operation of operations) { operation() } 

تقوم الحلقة بإجراء 5 تكرارات ، تضاف في كل منها وظيفة جديدة إلى صفيف operations . تعرض هذه الوظيفة في وحدة التحكم قيمة عداد الحلقة - i . بعد إضافة الدوال إلى الصفيف ، نكرر هذه الصفيف ونستدعي الدوال التي هي عناصرها.

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

 0 1 2 3 4 

ولكن في الواقع ، يُدخل ما يلي.

 5 5 5 5 5 

لماذا هذا؟ الشيء هو أنه باعتباره عداد حلقة نستخدم متغير معلن باستخدام الكلمة الأساسية var .

نظرًا لأن إعلانات هذه المتغيرات ترتفع إلى أعلى النطاق ، فإن الرمز أعلاه مشابه لما يلي.

 var i; const operations = [] for (i = 0; i < 5; i++) { operations.push(() => {   console.log(i) }) } for (const operation of operations) { operation() } 

ونتيجة لذلك ، اتضح أنه في حلقة for...of ، التي نكرر فيها المصفوفة ، لا يزال المتغير i مرئيًا ، وهو 5 ، ونتيجة لذلك ، بالإشارة إلى i في جميع الوظائف ، نطبع الرقم 5.

كيف تغير سلوك البرنامج بحيث يفعل ما هو متوقع منه؟

إن أبسط حل لهذه المشكلة هو استخدام الكلمة الأساسية let . كما ذكرنا من قبل ، ظهر في ES6 ، يسمح لك استخدامه بالتخلص من بعض الشذوذ المميزة var .

على وجه الخصوص ، في المثال أعلاه ، يكفي تغيير var to let وسيعمل كل شيء كما ينبغي.

 const operations = [] for (let i = 0; i < 5; i++) { operations.push(() => {   console.log(i) }) } for (const operation of operations) { operation() } 

الآن ، عند كل تكرار للحلقة ، تحصل كل وظيفة مضافة إلى مجموعة operations على نسختها الخاصة من i . تذكر أنه في هذه الحالة لا يمكنك استخدام الكلمة الأساسية const ، حيث تتغير قيمة i في الحلقة.

طريقة أخرى لحل هذه المشكلة ، والتي كانت تستخدم غالبًا قبل المعيار ES6 ، عندما لم تكن الكلمة الرئيسية let موجودة ، هي استخدام IIFE.

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

 const operations = [] for (var i = 0; i < 5; i++) { operations.push(((j) => {   return () => console.log(j) })(i)) } for (const operation of operations) { operation() } 

الملخص

تحدثنا اليوم عن المصفوفات والحلقات في JavaScript. موضوع مقالنا التالي هو معالجة الاستثناء ، وأنماط استخدام الفاصلة المنقوطة ، والحرف القالب.

أعزائي القراء! ما هي طرق العمل مع المصفوفات في JavaScript التي تستخدمها في أغلب الأحيان؟