ما فائدة forEach في جافاسكريبت

الدالة 

forEach()

 تستدعي دالةً لكل عنصر موجود في المصفوفة. و تركيبها كالتالي 

Array.prototype.forEach()

ماذا يعني ذلك ، ماذا لو كان لدينا مصفوفة مخزنة في ثابت وتحتوي على ثلاث عناصر كالتالي 

const arr = ['a', 'b', 'c'];

فيمكننا استخدام forEach مع هذه الثابت بهذا الشكل 

arr.forEach(function(element) {
    console.log(element);
});

وسيتم طباعة كل عنصر في المصفوفة بحيث يكون ناتج الكود السابق 

// a
// b
// c

الأن لاحظ أنه البنية العامة للدالة هي 

arr.forEach(callback[, thisArg])

و callback هي الدالة التي ستُنفَّذ كل عنصر من عناصر المصفوفة ، وتقبل ثلاثة وسائط ، الدالة forEach تُنفِّذ الدالة callback على كل عنصر موجود في المصفوفة. لاحظ أنَّ الدالة callback ستُستدعى على الفهارس التي لها قيمٌ مسندةٌ إليها، فهي لن تستدعى للفهارس التي حُذِفَت أو التي لم تُسنَد إليها قيم ، ستستدعى الدالة callback مع تمرير ثلاثة وسائط إليها: قيمة العنصر (currentValue)، وفهرسه (index)، وكائن المصفوفة (array).

إذا وفّرنا المعامل thisArg إلى الدالة forEach، فسيستخدم كقيمة this داخل الدالة callback، وإن لم نُحدِّد له قيمةً فستستعمل القيمة undefined.

لاحظ أنَّ الدالة forEach لا تغيّر المصفوفة التي تستدعى عليها بأيّ شكلٍ من الأشكال.

من غير ممكن إيقاف حلقة تكرار forEach()‎ إلا برمي استثناء، وإن كنت تحتاج إلى إيقاف حلقة التكرار فلا يُنصَح باستخدام الدالة forEach()‎، وإنما استخدم حلقات التكرار العادية. إذا أردتَ اختبار قيم المصفوفة فاستخدم الدالة every()‎ أو some()‎، ويمكن استخدام الدوال الجديدة find()‎ و findIndex()‎ لمعرفة وجود قيمة ما.

ومن الأمثلة عليها ، لاحظ يوجد لدينا دالة تقوم بطباعة رقم و اسم العنصر كالتالي 

var text = "";
function myFunction(item, index) {
  text += index + "- " + item + "<br>"; 
}

ومن ثم لدينا مصفوفة بهذا الشكل 

var text = "";
const numbers = ["one", "two", "three"]; // هذه المصفوفة

function myFunction(item, index) {
  text += index + "- " + item + "<br>"; 
}

لاحظ نريد تطبيق الدالة myFunction على عناصر المصفوفة فيمكننا استخدام forEach كالتالي 

var text = "";
const numbers = ["one", "two", "three"];
numbers.forEach(myFunction); // هنا

function myFunction(item, index) {
  text += index + "- " + item + "<br>"; 
}

ثم نقوم بإنشاء عنصر لطباعة النتيجة في الصفحة

<div id="text"></div>

ثم نقوم في جافا سكريبت باسناد النتيجة للعنصر الذي يحمل id و هو text كالتالي

var text = "";
const numbers = ["one", "two", "three"];
numbers.forEach(myFunction);
document.getElementById("text").innerHTML = text;

function myFunction(item, index) {
  text += index + "- " + item + "<br>"; 
}

فلاحظ النتيجة ستكون بعد تطبيق الدالة على عناصر المصفوفة 

0- one
1- two
2- three