حلقات المصفوفات في

نبذة عن حلقات المصفوفات

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

سننظر هنا في الحالة التي لا ترغب فيها في تعديل المصفوفة أثناء ذلك. أما لتحويل المصفوفات، فراجع مفهوم تحويلات المصفوفة بدلًا من ذلك.

حلقة for

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

const numbers = [6.0221515, 10, 23];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}
// => 6.0221515
// => 10
// => 23

حلقة for...of

عندما تريد التعامل مع القيمة مباشرة في كل تكرار ولا تحتاج إلى الفهرس إطلاقًا، يمكنك استخدام حلقة for...of.

تعمل حلقة for...of مثل حلقة for الأساسية الموضحة أعلاه، لكن بدلًا من أن تتعامل مع الفهرس كمتغير في الحلقة، تُمنح القيمة مباشرة.

const numbers = [6.0221515, 10, 23];

// Because re-assigning number inside the loop will be very
// confusing, disallowing that via const is preferable.
for (const number of numbers) {
  console.log(number);
}
// => 6.0221515
// => 10
// => 23

تمامًا كما في حلقات for العادية، يمكنك استخدام continue لإيقاف التكرار الحالي وbreak لإيقاف تنفيذ الحلقة بالكامل.

تحتوي JavaScript أيضًا على حلقة for...in للتكرار على المفاتيح في كائن. ومن المهم ملاحظة أن for...of وfor...in ليسا قابلين للتبادل، راجع توثيق MDN للحصول على تفاصيل حول ذلك.

طريقة forEach

تتضمن كل مصفوفة طريقة forEach يمكن استخدامها أيضًا للمرور على العناصر في المصفوفة.

تقبل forEach دالة رد الاتصال كمعامل. وتُستدعى دالة رد الاتصال مرة واحدة لكل عنصر في المصفوفة.

const numbers = [6.0221515, 10, 23];

numbers.forEach((number) => console.log(number));
// => 6.0221515
// => 10
// => 23

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

• القيمة الخاصة بالتكرار الحالي
• الفهرس الخاص بالتكرار الحالي
• المصفوفة كاملة

const numbers = [6.0221515, 10, 23];

function callback(number, index, fullArray) {
  console.log(number, index, fullArray);
}

numbers.forEach(callback);
// => 6.0221515 0 [ 6.0221515, 10, 23 ]
// => 10 1 [ 6.0221515, 10, 23 ]
// => 23 2 [ 6.0221515, 10, 23 ]

إلى جانب دالة رد الاتصال، تقبل forEach سياق this الذي يُستخدم في التكرار كمعامل ثانٍ اختياري. يمكنك رؤية مثال في قسم «استخدام thisArg» على MDN.

هناك بضعة أمور يجب أن تضعها في الاعتبار عند العمل مع forEach.

• لا توجد طريقة لإيقاف التكرار بعد أن تبدأ حلقة forEach. فلا وجود لعبارتي break وcontinue في هذا السياق.
• تتصرف forEach بغرابة إذا عدّلت المصفوفة بعد بدء الحلقة. فالعناصر التي تضيفها في النهاية ستُتجاهل، وقد يؤدي حذف عناصر إلى تخطّي عناصر أخرى، وهكذا. ولتجنّب هذه المشكلات، لا تعدّل المصفوفة الأساسية أبدًا داخل دالة رد الاتصال.
• قيمة الإرجاع من طريقة forEach نفسها هي undefined. ولهذا السبب، لا يمكنك تسلسل أي طرق أخرى للمصفوفات في النهاية.
• إذا كنت بحاجة إلى تحسين الكود من حيث الأداء، فيُفضّل أن تفكر في استخدام for أو for...of بدلًا منها، إذ إن كلتيهما أسرع بنحو ثلاث مرات.