🔄 شرح طريقة forEach في JavaScript: دليلك الشامل للمبتدئين

اليوم سنتعلم واحدة من أهم الدوال في JavaScript وهي forEach. إذا كنت تريد التعامل مع المصفوفات بسهولة وسلاسة، فهذه الدالة ستكون صديقك المفضل! 🎯

ما هي دالة forEach؟

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

الفكرة الأساسية: تمر على كل عنصر في المصفوفة وتنفذ وظيفة معينة عليه.

// مثال بسيط
const fruits = ["Apple", "Banana", "Orange"];

fruits.forEach(function(fruit) {
    console.log(fruit);
});
// النتيجة: Apple, Banana, Orange

💡 البنية الأساسية لـ forEach

لفهم forEach بشكل صحيح، دعنا ننظر إلى تركيبها:

array.forEach(function(element, index, array) {
    // الكود الذي تريد تنفيذه لكل عنصر
});

المعاملات الثلاثة التي يمكنك استخدامها:

  1. element: قيمة العنصر الحالي في التكرار
  2. index: رقم موقع العنصر في المصفوفة (يبدأ من 0)
  3. array: المصفوفة التي نعمل عليها

🚀 أمثلة عملية على استخدام forEach

المثال ١: طباعة عناصر المصفوفة

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

numbers.forEach(function(number) {
    console.log("The number is: " + number);
});

المثال ٢: استخدام الفهرس مع العنصر

const colors = ["Red", "Blue", "Green"];

colors.forEach(function(color, index) {
    console.log("The color at position " + index + " is: " + color);
});

المثال ٣: جمع قيم المصفوفة

const prices = [100, 50, 75];
let total = 0;

prices.forEach(function(price) {
    total += price;
});

console.log("The total is: " + total); // النتيجة: 225

⚡ كتابة forElement بطريقة السهم (Arrow Function)

يمكننا جعل الكود أكثر اختصاراً باستخدام دوال السهم:

// الطريقة التقليدية
fruits.forEach(function(fruit) {
    console.log(fruit);
});

// الطريقة الحديثة بدوال السهم
fruits.forEach(fruit => console.log(fruit));

❌ ما الذي لا تستطيع forEach فعله؟

من المهم أن تعرف حدود forEach:

  • لا ترجع قيمة: لا يمكنك استخدام return للحصول على نتيجة
  • لا يمكن إيقافها: لا يوجد break كما في الحلقات العادية
  • لا تعدل المصفوفة الأصلية: لكن يمكنك تعديل محتويات العناصر إذا كانت كائنات
// هذا لن يعمل كما تتوقع
const result = numbers.forEach(function(number) {
    return number * 2; // لن يرجع قيمة
});

🏆 متى تستخدم forElement؟

استخدم forElement عندما:

  • تريد تنفيذ عملية على كل عنصر في المصفوفة
  • لا تحتاج لإرجاع مصفوفة جديدة
  • لا تحتاج لإيقاف التكرار في منتصف الطريق

استخدم طرقاً أخرى عندما:

  • تحتاج لإرجاع مصفوفة جديدة (استخدم map)
  • تحتاج تصفية المصفوفة (استخدم filter)
  • تحتاج إيقاف التكرار (استخدم for عادي)

💪 تمرين عملي

جرب هذا التمرين البسيط لتطبيق ما تعلمته:

const students = ["Ahmed", "Fatima", "Mohamed", "Sarah"];

// المطلوب: اطبع رسالة ترحيب لكل طالب مع رقمه التسلسلي
students.forEach(function(student, index) {
    console.log("Hello " + student + "! You are student number " + (index + 1));
});

🎯 خلاصة الدرس

تعلمنا اليوم أن:

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