JavaScript forEach - كيفية التكرار عبر مصفوفة في JS

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

في هذا المنشور ، سنلقي نظرة فاحصة على طريقة JavaScript forEach.

بالنظر إلى أن لدينا المصفوفة التالية أدناه:

const numbers = [1, 2, 3, 4, 5];

سيكون استخدام "for loop" التقليدي للحلقة خلال المصفوفة كما يلي:

for (i = 0; i < numbers.length; i++) { console.log(numbers[i]); } 

ما الذي يجعل طريقة forEach () مختلفة؟

تُستخدم طريقة forEach أيضًا للتكرار خلال المصفوفات ، ولكنها تستخدم وظيفة مختلفة عن "for loop" الكلاسيكية.

يمرر التابع forEach وظيفة رد نداء لكل عنصر من عناصر المصفوفة مع المعلمات التالية:

• القيمة الحالية (مطلوب) - قيمة عنصر الصفيف الحالي
• الفهرس (اختياري) - رقم فهرس العنصر الحالي
• Array (اختياري) - كائن المصفوفة الذي ينتمي إليه العنصر الحالي

اسمحوا لي أن أشرح هذه المعلمات خطوة بخطوة.

أولاً ، للتكرار خلال مصفوفة باستخدام التابع forEach ، فأنت بحاجة إلى وظيفة نداء (أو دالة مجهولة):

numbers.forEach(function() { // code });

سيتم تنفيذ الوظيفة لكل عنصر من عناصر المصفوفة. يجب أن يأخذ معلمة واحدة على الأقل تمثل عناصر المصفوفة:

numbers.forEach(function(number) { console.log(number); });

هذا كل ما يتعين علينا القيام به للتكرار خلال المصفوفة:

بدلاً من ذلك ، يمكنك استخدام تمثيل وظيفة السهم ES6 لتبسيط التعليمات البرمجية:

numbers.forEach(number => console.log(number));

معلمات اختيارية

فهرس

حسنًا ، دعنا الآن نواصل المعلمات الاختيارية. الأول هو معامل "الفهرس" ، الذي يمثل رقم الفهرس لكل عنصر.

في الأساس ، يمكننا رؤية رقم الفهرس لعنصر ما إذا قمنا بتضمينه كمعامل ثانٍ:

numbers.forEach((number, index) => { console.log('Index: ' + index + ' Value: ' + number); });

مجموعة مصفوفة

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

numbers.forEach((number, index, array) => { console.log(array); });

يمكنك مشاهدة مثال استخدام طريقة forEach () في هذا الفيديو:

دعم المتصفح

طريقة Array.forEach مدعومة في جميع المتصفحات التي تتوقع IE الإصدار 8 أو أقدم:

إذا كنت تريد معرفة المزيد عن تطوير الويب ، فلا تتردد في زيارة قناة Youtube الخاصة بي.

شكرا لقرائتك!