JavaScript forEach: دليل شامل للتكرار الفعال عبر المصفوفات

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

لنفترض أن لدينا المصفوفة التالية من الأرقام التي نرغب في معالجة عناصرها:

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

عند استخدام حلقة التكرار التقليدية for لاجتياز هذه المصفوفة، ستبدو الشيفرة كالتالي:

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

ما الذي يميز التابع forEach()؟

يُستخدم التابع forEach أيضًا للتكرار عبر المصفوفات، لكنه يتبنى نهجًا مختلفًا عن حلقة التكرار for الكلاسيكية. يعتمد forEach على تمرير دالة استدعاء (callback function) لكل عنصر من عناصر المصفوفة، والتي يمكن أن تستقبل المعاملات التالية:

• currentValue (إلزامي): يمثل قيمة العنصر الحالي الذي تتم معالجته في المصفوفة.
• index (اختياري): يمثل رقم فهرس (index) العنصر الحالي في المصفوفة.
• array (اختياري): يمثل كائن المصفوفة (array object) الذي ينتمي إليه العنصر الحالي.

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

دالة الاستدعاء الأساسية (Callback Function)

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

numbers.forEach(function () {
  // الشيفرة هنا
});

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

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

هذا كل ما نحتاجه للتكرار الأساسي عبر المصفوفة وعرض عناصرها:

تبسيط الشيفرة باستخدام دوال السهم (Arrow Functions) في ES6

بدلاً من ذلك، يمكنك استخدام صيغة دوال السهم (arrow functions) في ES6 لتبسيط الشيفرة وجعلها أكثر إيجازًا ووضوحًا:

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

المعاملات الاختيارية: الفهرس (Index)

لننتقل الآن إلى المعاملات الاختيارية. المعامل الأول هو index، والذي يمثل رقم فهرس كل عنصر في المصفوفة. يمكننا عرض رقم الفهرس الخاص بالعنصر ببساطة عن طريق تضمينه كمعامل ثانٍ لدالة الاستدعاء:

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

المعاملات الاختيارية: المصفوفة نفسها (Array)

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

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

دعم المتصفحات لـ Array.forEach

يتمتع التابع Array.forEach بدعم واسع النطاق في معظم المتصفحات الحديثة، مما يجعله خيارًا آمنًا وموثوقًا لتطوير الويب المعاصر. ومع ذلك، من المهم ملاحظة أنه لا يدعم الإصدارات القديمة جدًا من المتصفحات مثل Internet Explorer 8 أو ما قبلها. يمكنك دائمًا التحقق من أحدث معلومات الدعم والتوافق عبر مواقع مثل caniuse.com.

الخلاصة التقنية

يُعد التابع forEach أداة لا غنى عنها في ترسانة مطور JavaScript الحديث. يوفر هذا التابع طريقة أنيقة ومقروءة للتكرار عبر عناصر المصفوفات، متجاوزًا في كثير من الأحيان تعقيد حلقات for التقليدية. إن فهم كيفية استخدام دالة الاستدعاء ومعاملاتها الاختيارية (index و array) يمكّن المطورين من كتابة شيفرة أكثر وضوحًا وفعالية، مما يساهم في تحسين صيانة المشروع وقابليته للتوسع. استخدام forEach يعزز نمط البرمجة الوظيفية ويجعل التعامل مع البيانات في المصفوفات أكثر سلاسة، مما يجعله خيارًا مفضلاً للعديد من مهام معالجة المصفوفات في تطبيقات الويب الحديثة.