دليل شامل لحلقات التكرار في JavaScript: استكشاف طرق التعامل مع المصفوفات بفعالية

مرحباً بك أيها المطور الطموح في منصة قيد! سواء كنت في بداية رحلتك لتعلم JavaScript أو تبحث عن مراجعة سريعة ومفيدة، فإن هذا المقال سيمنحك فهماً عميقاً لكيفية التكرار على هياكل بيانات المصفوفات (Array) في JavaScript. تُعد عملية التكرار على المصفوفات من المفاهيم الأساسية والأكثر استخداماً في برمجة JavaScript، وهي ضرورية لبناء تطبيقات قوية وفعالة.

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

ما هي المصفوفة (Array) في JavaScript؟

المصفوفة في JavaScript هي كائن عالمي يُستخدم لتخزين قيم متعددة في متغير واحد. تُعد المصفوفات هياكل بيانات منظمة تسمح لك بتخزين مجموعة من العناصر، سواء كانت نصوصاً، أرقاماً، كائنات، أو حتى دوال.

let cars = [
    "Tesla",
    "Ferrari",
    "Lamborghini",
    "Audi"
];

المثال أعلاه يوضح مصفوفة JavaScript بسيطة تُستخدم لتخزين قيم متعددة. تحتوي هذه المصفوفة على أربعة “عناصر” (elements)، وجميعها من نوع السلسلة النصية (string). وكما ترى، يتم فصل كل عنصر عن الآخر بفاصلة. يمكن الإشارة إلى هذه المصفوفة باستخدام المتغير cars.

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

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

حلقة التكرار التقليدية (Traditional For Loop)

ما هي حلقة for؟

في علوم الحاسوب، حلقة for هي عبارة تحكم تدفق تُستخدم لتحديد التكرار، مما يسمح بتنفيذ الكود بشكل متكرر. إنها طريقة لتنفيذ الكود عدة مرات. فبدلاً من كتابة console.log("hi") خمس مرات، يمكنك وضعها داخل حلقة for.

في هذا المثال الأول، سنتعلم كيفية التكرار على مصفوفة cars التي رأيتها أعلاه، وطباعة كل عنصر فيها. سيبدأ المؤشر، أو العداد، من الفهرس الأول “Tesla” وينتهي عند الأخير “Audi“. سيتنقل عبر المصفوفة ويطبع عنصراً واحداً في كل مرة.

let cars = [
    "Tesla",
    "Ferrari",
    "Lamborghini",
    "Audi"
];

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

الناتج (Output):

Tesla
Ferrari
Lamborghini
Audi

بالغوص في الكود، نمرر ثلاثة خيارات لحلقة for:

• متغير المؤشر: let i = 0; حيث يبدأ المؤشر من الفهرس صفر.
• شرط التوقف: i < cars.length; حيث يجب أن يتوقف المؤشر عندما يصل إلى طول المصفوفة.
• مقدار الزيادة: i++; مقدار زيادة المؤشر في كل دورة.

تبدأ هذه الحلقة من 0، وتزيد المتغير بمقدار واحد في كل دورة، وتتوقف عندما نصل إلى العنصر الأخير في المصفوفة. الفائدة الرئيسية لحلقة for التقليدية هي أن لديك تحكماً أكبر. من الممكن الوصول إلى عناصر مختلفة داخل المصفوفة، أو التكرار عبر المصفوفة بطريقة معقدة لحل مشكلة صعبة. على سبيل المثال، يمكن تخطي كل عنصر آخر في المصفوفة بسهولة تامة باستخدام حلقة for التقليدية.

طريقة forEach

ما هي طريقة forEach؟

تُستخدم طريقة forEach لتنفيذ دالة لكل عنصر من عناصر المصفوفة الخاصة بك. تُعد هذه الطريقة خياراً ممتازاً إذا كان طول المصفوفة “غير معروف”، أو مضموناً أن يتغير. يمكن استخدام هذه الطريقة فقط مع المصفوفات (Arrays) والمجموعات (Sets) والخرائط (Maps).

const amounts = [65, 44, 12, 4];
let doubledAmounts = [];

amounts.forEach(item => {
    doubledAmounts.push(item * 2);
});

console.log(doubledAmounts);

الناتج (Output):

[130, 88, 24, 8]

أكبر فائدة لحلقة forEach هي القدرة على الوصول إلى كل عنصر، حتى لو كان من المرجح أن يزداد حجم المصفوفة. إنه حل قابل للتطوير للعديد من حالات الاستخدام، وهو أسهل في القراءة والفهم من حلقة for التقليدية لأننا نعلم أننا سنتكرر على كل عنصر مرة واحدة بالضبط.

حلقة while

ما هي حلقة while؟

حلقة while هي عبارة تحكم تدفق تسمح بتنفيذ الكود بشكل متكرر بناءً على شرط منطقي (Boolean condition) معين. يمكن اعتبار حلقة while بمثابة عبارة if متكررة.

حلقة while هي طريقة لتنفيذ الكود بشكل متكرر للتحقق مما إذا كان الشرط صحيحاً أم خاطئاً. لذا، بدلاً من استخدام حلقة for مع عبارة if متداخلة، يمكننا استخدام حلقة while. أو، إذا لم نتمكن من معرفة طول المصفوفة، فإن حلقات while تعد خياراً ممتازاً. غالباً ما يتم التحكم في حلقة while بواسطة عداد. في المثال أدناه، نعرض حلقة while أساسية تتكرر عبر مصفوفة. المفتاح هو التحكم في حلقة while التي تقوم بإنشائها.

مثال على حلقة while (صحيح):

let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

الناتج (Output):

0
1
2
3
4

عبارة if في حلقة while هي i < 5، أو بصوت عالٍ، “i أقل من 5″. يتم زيادة المتغير i في كل مرة تعمل فيها الحلقة. بعبارات بسيطة، هذا يعني أن 1 يتم إضافته إلى المتغير i في كل مرة تقوم فيها الحلقة بتكرار كامل. في التكرار الأول، يكون i مساوياً لـ 0، ونطبع “0” إلى وحدة التحكم.

أكبر خطر لاستخدام حلقة while هو كتابة شرط لا يتم تحقيقه أبداً. يحدث هذا بشكل متكرر في سيناريوهات العالم الحقيقي، حيث يكتب شخص ما حلقة while ولكنه ينسى اختبار حلقته، وهذا يؤدي إلى إدخال حلقة لا نهائية (infinite loop) في قاعدة الكود. تحدث الحلقة اللانهائية عندما لا يتم تحقيق الشرط أبداً، وتستمر الحلقة في العمل إلى الأبد. غالباً ما يؤدي هذا إلى تغييرات مدمرة، مما يتسبب في تعطل تطبيق البرنامج بأكمله وتوقفه عن العمل.

تحذير: لا تقم بتشغيل هذا الكود.

مثال على حلقة لا نهائية (خطأ):

let i = 0;
while (i < 5) {
    console.log(i);
}

الناتج (Output):

قد تختلف النتائج وقد يتوقف المتصفح عن الاستجابة.

حلقة do-while

ما هي حلقة do-while؟

حلقة do-while هي عبارة تحكم تدفق تنفذ كتلة من الكود مرة واحدة على الأقل، ثم تنفذ الكتلة بشكل متكرر، أو لا، اعتماداً على شرط منطقي معين في نهاية الكتلة.

حلقة do-while مطابقة تقريباً لحلقة while، ولكن هناك اختلاف رئيسي واحد. تضمن حلقة do-while دائماً تنفيذ كتلة الكود مرة واحدة على الأقل قبل التحقق من عبارة if (الشرط). يمكن اعتبارها حلقة while معكوسة، ونادراً ما تُستخدم. ومع ذلك، فإنها تكون مفيدة في بعض السيناريوهات المحددة جداً.

مثال على حلقة do-while (صحيح):

let i = 0;
do {
    console.log(i);
    i++;
} while (i < 5);

الناتج (Output):

0
1
2
3
4

أكبر خطر لاستخدام حلقة do-while هو كتابة شرط لا يتم تحقيقه أبداً. (نفس الخطر الموجود في حلقة while).

تحذير: لا تقم بتشغيل هذا الكود.

مثال على حلقة لا نهائية (خطأ):

let i = 0;
do {
    console.log(i);
} while (i < 5);

الناتج (Output):

قد تختلف النتائج وقد يتوقف المتصفح عن الاستجابة.

مثال إضافي (BONUS): التكرار باستخدام map

هل ترغب في الارتقاء بمعرفتك في JavaScript إلى المستوى التالي؟ تعرف على طريقة map، التي تشبه forEach، ولكن مع ميزة إضافية!

ما هي طريقة map؟

في العديد من لغات البرمجة، map هو اسم لدالة ترتيب أعلى (higher-order function) تطبق دالة معينة على كل عنصر من عناصر كائن وظيفي (functor)، مثل قائمة (list)، وتعيد قائمة بالنتائج بنفس الترتيب. غالباً ما تُسمى “تطبيق على الكل” (apply-to-all) عند اعتبارها في شكل وظيفي.

كيف تعمل طريقة map؟

تطبق دالة map في JavaScript دالة على كل عنصر داخل المصفوفة. بعد ذلك، تعيد دالة map مصفوفة جديدة تحتوي على نتائج تطبيق الدالة على كل عنصر في المصفوفة. المفتاح هنا هو أنها تعيد مصفوفة جديدة ولا تعدل المصفوفة الأصلية.

مثال على map:

const array = [1, 1, 1, 1];

// تمرير دالة إلى map
const results = array.map(x => x * 2);

console.log(results);

الناتج (Output):

[2, 2, 2, 2]

لقد طبقنا دالة map على المصفوفة التي تحتوي على أربعة أرقام 1. ثم قامت دالة map بضرب كل عنصر في 2، أي x * 2، وأعادت مصفوفة جديدة. تم تخزين المصفوفة الجديدة بعد ذلك في المتغير results. من خلال عرض الناتج، يمكننا أن نرى أن هذا قد نجح بنجاح. لقد تم ضرب كل عنصر في المصفوفة في 2. يمكن استخدام هذه الطريقة كبديل للحلقة في بعض الحالات، وهي قوية بشكل لا يصدق.

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

تهانينا! لقد تعلمت خمس طرق مختلفة وفعالة للتكرار على المصفوفات في JavaScript. هذه المفاهيم هي اللبنات الأساسية التي ستؤهلك للنجاح في رحلتك البرمجية في JavaScript. لقد تعرضت أيضاً لمفهوم متقدم، وهو map، الذي يُستخدم غالباً في تطبيقات البرمجيات واسعة النطاق.

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

الآن، كيف ستستخدم المصفوفات في مشاريعك؟ وأي طريقة تكرار وجدتها الأكثر إثارة للاهتمام؟ شاركنا رأيك!