كيفية التكرار على مصفوفة في JavaScript: forEach، for...of وطرق أخرى

لماذا "التكرار على مصفوفة" هو الأساس الذي يجب حفظه عن ظهر قلب

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

سؤال "Loop (for each) over an array in JavaScript" على Stack Overflow حصد آلاف المشاهدات. هذا يعني أنه حتى المطورين ذوي الخبرة يخلطون أحياناً في التفاصيل الدقيقة. سنقوم بترتيب كل شيء: من for الكلاسيكي إلى for...of الحديث وforEach القوي. ستتعرف متى تستخدم أي طريقة، وستتوقف عن الخوف من المصفوفات.

الطريقة رقم 1: حلقة for الكلاسيكية - جد جميع التكرارات

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

const fruits = ['تفاح', 'موز', 'برتقال'];
for (let i = 0; i < fruits.length; i++) {
    console.log(`فاكهة رقم ${i + 1}: ${fruits[i]}`);
}

الإيجابيات: تحكم كامل، يمكن استخدام break و continue.
\nالسلبيات: مطول، سهولة الخطأ في المؤشرات.

متى تستخدم for الكلاسيكي

\n
• تحتاج إلى إيقاف التكرار مبكراً (مثلاً عند البحث عن عنصر).
\n
• تحتاج إلى الوصول إلى المؤشر (وليس فقط القيمة).
\n
• تعمل مع مصفوفات متعددة الأبعاد.
\n

الطريقة رقم 2: forEach - ملك الاجتيازات في JavaScript

هذه الطريقة هي إجابة سؤال "Loop (for each) over an array in JavaScript" في 90% من الحالات. يتم استدعاؤها مباشرة على المصفوفة وتأخذ دالة رد نداء (callback) يتم تنفيذها لكل عنصر.

const fruits = ['تفاح', 'موز', 'برتقال'];
fruits.forEach(function(fruit, index) {
    console.log(`فاكهة رقم ${index + 1}: ${fruit}`);
});

// نفس الشيء باستخدام دالة السهم (الأسلوب الحديث):
fruits.forEach((fruit, index) => {
    console.log(`فاكهة رقم ${index + 1}: ${fruit}`);
});

هام: forEach لا يُرجع مصفوفة جديدة (على عكس map). هو ببساطة ينفذ إجراءً لكل عنصر. ونعم، break و continue لا يعملان هنا - إذا كنت بحاجة لإنهاء الحلقة، استخدم for...of أو for الكلاسيكي.

معاملات دالة رد النداء لـ forEach

\n
• المعامل الأول - العنصر الحالي في المصفوفة (إلزامي).
\n
• المعامل الثاني - مؤشر العنصر (اختياري).
\n
• المعامل الثالث - المصفوفة نفسها (نادراً ما يُحتاج).
\n

[10, 20, 30].forEach((value, index, array) => {
    console.log(`العنصر ${value} في الموضع ${index} في المصفوفة [${array}]`);
});

الطريقة رقم 3: for...of - حديث وأنيق

ظهر في ES6 (2015) وأحبّه المطورون فوراً. يعمل ليس فقط مع المصفوفات، بل مع أي كائنات قابلة للتكرار (سلاسل نصية، Set، Map).

const fruits = ['تفاح', 'موز', 'برتقال'];
for (const fruit of fruits) {
    console.log(`فاكهة: ${fruit}`);
}

الميزة الرئيسية: يمكن استخدام break و continue. وأيضاً الكود يبدو نظيفاً وقابلاً للقراءة.

كيفية الحصول على المؤشر في for...of

إذا كنت بحاجة إلى المؤشر، استخدم طريقة entries():

for (const [index, fruit] of fruits.entries()) {
    console.log(`فاكهة رقم ${index + 1}: ${fruit}`);
}

الطريقة رقم 4: map - عندما تحتاج لإنشاء مصفوفة جديدة

إذا كنت لا تريد فقط التكرار، بل تحويل كل عنصر والحصول على مصفوفة جديدة بنفس الطول، استخدم m