كيف تعمل الحلقات التكرارية Loops في JavaScript؟

تُعد الحلقات التكرارية واحدة من الأساسيات المهمة في البرمجة، حيث تُستخدم لتكرار تنفيذ نفس الكود عدة مرات. في JavaScript، نستخدم الحلقات مثل for و while لتحقيق هذا الهدف، مما يجعل كتابة الكود أكثر كفاءة ويقلل التكرار.

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

كيف تعمل الحلقات التكرارية Loops في JavaScript؟

مقدمة إلى الحلقات التكرارية في JavaScript

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

باستخدام الجمل الشرطية، يمكنك أن تُعلم البرنامج بتنفيذ قطعة معينة من الكود إذا تحقق شرط معين، أو الانتقال لتنفيذ جزء آخر إذا لم يتحقق الشرط. لكن ماذا لو أردت تنفيذ نفس الكود مرات عديدة؟ ليس مرة واحدة فقط، بل ربما 100 مرة أو حتى أكثر؟

تخيل أنك معلم وتريد حساب درجات جميع طلابك، وعددهم 170 طالبًا، أو أنك ترغب في حساب عدد الأصدقاء المشتركين لكل صديق من بين 300 صديق على فيسبوك. بل ربما تريد ببساطة العدّ إلى مليون! في هذه الحالات، إذا حاولت كتابة الكود لكل حالة يدويًا، فقد ينتهي بك الأمر مع مئات أو آلاف أو حتى ملايين الأسطر من الكود، وجميعها تقوم بنفس المهمة تقريبًا.

هنا يأتي دور الحلقات التكرارية (Loops) في JavaScript. الحلقات هي أداة قوية تساعدك على تكرار تنفيذ قطعة من الكود مرارًا وتكرارًا، مما يوفر عليك الوقت والمجهود. في هذا المقال، ستتعلم كيفية استخدام الحلقات التكرارية في JavaScript لتنفيذ كود بشكل متكرر وبكفاءة عالية.

لنبدأ بفهم أساسيات الحلقات وكيف يمكنك استخدامها لتحقيق أقصى استفادة من الكود الخاص بك.

الحلقات التكرارية While في JavaScript

هل فكرت يومًا في كيفية العد من 1 إلى 10,000 باستخدام الكود؟ بالتأكيد كتابة نفس السطر البرمجي آلاف المرات ليس الخيار الأفضل أو العملي. هنا يأتي دور الحلقات التكرارية، وتحديدًا حلقة While، التي توفر لك طريقة سهلة وفعالة لتكرار الكود تلقائيًا دون الحاجة لإعادة كتابته يدويًا.

ما هي حلقة While؟

حلقة While هي نوع من الحلقات التكرارية التي تستمر في التنفيذ طالما أن شرطًا معينًا يظل صحيحًا. بمجرد أن يصبح هذا الشرط خاطئًا، تتوقف الحلقة.

كيف تعمل حلقة While؟

لنفترض أنك تريد العد من 1 إلى 10,000. بدلًا من كتابة كود طويل ممل ومكرر، يمكنك تحقيق ذلك باستخدام خمس أسطر فقط:

let x = 1; // البداية من الرقم 1

while (x <= 10000) { 
    console.log(x); // طباعة القيمة الحالية لـ x
    x++; // زيادة قيمة x بمقدار 1
}

تحليل الكود:

1. تهيئة المتغير: قمنا بتعيين القيمة الأولية للمتغير x إلى 1.
2. الشرط: الحلقة ستستمر في العمل طالما أن قيمة x أقل من أو تساوي 10,000.
3. تنفيذ الكود داخل الحلقة:

• طباعة القيمة الحالية للمتغير x باستخدام console.log.
• زيادة قيمة x بمقدار 1 باستخدام العامل ++.

4. التوقف عند انتهاء الشرط: بمجرد أن تصبح قيمة x أكبر من 10,000، يصبح الشرط خاطئًا، وتتوقف الحلقة.

لماذا نستخدم الحلقات التكرارية؟

• تقليل التكرار: بدلاً من كتابة مئات أو آلاف الأسطر، يمكنك استخدام حلقة لتنفيذ نفس الكود.
• كفاءة الأداء: الحلقات توفر طريقة عملية للتعامل مع المهام المتكررة.
• المرونة: يمكنك بسهولة تعديل الشرط لتلبية احتياجات مختلفة.

ماذا لو أردت تعديل الكود؟

إذا أردت العد لأرقام مختلفة أو استخدام خطوات أكبر (مثل العد بـ 2 بدلاً من 1)، يمكنك بسهولة تعديل الكود:

let x = 1;

while (x <= 10000) { 
    console.log(x);
    x += 2; // زيادة بـ 2 بدلاً من 1
}

أجزاء حلقة While في JavaScript

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

1. تهيئة المتغير (Initialization)

• قبل أن تبدأ الحلقة، يجب عادةً تهيئة متغير ليتم استخدامه داخل الشرط.
  
• هذا المتغير يتحكم في عدد مرات تشغيل الحلقة، ويبدأ بقيمة أولية تُحدد قبل الدخول إلى الحلقة.

let counter = 1; // تهيئة المتغير بقيمة أولية

2. الشرط (Condition)

• الشرط هو القلب النابض للحلقة. طالما أن هذا الشرط صحيح، تستمر الحلقة في التنفيذ.
  
• يتم كتابة الشرط داخل أقواس الحلقة while، ويُقيّم قبل كل دورة.

while (counter <= 10) { // الشرط: الحلقة ستستمر طالما أن counter أقل أو يساوي 10
    console.log(counter);
    counter++;
}

3. كود التنفيذ (Code Block)

• هو الجزء من الكود الذي يتم تنفيذه طالما أن الشرط صحيح.
  
• يُكتب الكود داخل أقواس {} الخاصة بالحركة التكرارية.
  
• يمكن أن يتضمن الكود طباعة القيم، العمليات الحسابية، أو استدعاء دوال.

{
    console.log(counter); // طباعة القيمة الحالية للمتغير
}

4. التحديث (Update Statement)

• هذه هي الخطوة التي تغير قيمة المتغير الذي يُستخدم في الشرط.
  
• بدون التحديث، قد تصبح الحلقة لا نهائية إذا استمر الشرط صحيحًا دائمًا.

counter++; // تحديث قيمة المتغير بزيادة 1

مثال كامل

let counter = 1; // تهيئة المتغير

while (counter <= 5) { // الشرط
    console.log("Current count is:", counter); // كود التنفيذ
    counter++; // تحديث المتغير
}

تحليل المثال:
1. يبدأ المتغير counter بالقيمة 1. 2. الحلقة تستمر طالما أن counter <= 5. 3. عند كل دورة: - تطبع الحلقة قيمة counter. - تُزيد قيمة counter بمقدار 1. 4. تتوقف الحلقة عندما تصبح قيمة counter أكبر من 5.

التنبيهات المهمة:

1. الحلقات اللانهائية:
   • إذا نسيت تحديث المتغير داخل الحلقة، قد تستمر في العمل إلى الأبد.
   • مثال على خطأ شائع:

   let x = 1;
   while (x <= 10) {
       console.log(x); // الحلقة ستستمر إلى ما لا نهاية
   }

2. الشروط غير الصحيحة:
   • إذا كان الشرط خاطئًا من البداية، لن تعمل الحلقة أبدًا.

   let x = 10;
   while (x < 5) { // الشرط خاطئ
       console.log(x); // لن يتم تنفيذ هذا الكود أبدًا
   }

مقدمة عن حلقة For في JavaScript

تُعتبر حلقة For من الأدوات الأساسية والمهمة في JavaScript لتنفيذ التعليمات البرمجية المتكررة بطريقة منظمة وسهلة الفهم. مقارنة بحلقة While، توفر حلقة For مزيدًا من التحكم بفضل هيكلها الواضح الذي يجمع كل العناصر الأساسية للحلقة في مكان واحد.

لماذا نحتاج إلى حلقة For؟

عند استخدام الحلقات، يجب علينا دائمًا تحديد العناصر الثلاثة الرئيسية التالية لضمان عملها بشكل صحيح وتجنب الأخطاء، مثل الحلقات اللانهائية:

1. النقطة التي تبدأ منها الحلقة (Initialization): تحديد القيمة الأولية.
2. النقطة التي تتوقف عندها الحلقة (Condition): تحديد متى يجب أن تتوقف.
3. طريقة الانتقال إلى العنصر التالي (Increment/Decrement): كيفية تحديث المتغير بين كل دورة.

نسيان أي من هذه العناصر في الحلقات الأخرى، مثل While، قد يؤدي إلى حدوث أخطاء أو حتى تعطل المتصفح بسبب حلقة لا نهائية.

حلقة For: طريقة أكثر تحكمًا ومرونة

حلقة For تحل هذه المشكلة لأنها تجمع كل العناصر الأساسية داخل الأقواس الخاصة بها، مما يجعل الكود أكثر وضوحًا وتنظيمًا.

الصيغة العامة لحلقة For:

for (initialization; condition; update) {
    // الكود الذي سيتم تنفيذه
}

شرح العناصر المكونة للحلقة التكرارية for:

1. Initialization (التهيئة): إعداد المتغير بقيمته الابتدائية، مثل let i = 0.
2. Condition (الشرط): الشرط الذي يجب أن يتحقق ليستمر تنفيذ الحلقة، مثل i < 10.
3. Update (التحديث): تحديث المتغير بعد كل دورة، مثل i++.

مثال عملي على حلقة For:

لنقم بطباعة الأرقام من 1 إلى 5 باستخدام حلقة For:

for (let i = 1; i <= 5; i++) {
    console.log("العدد الحالي هو:", i);
}

تحليل المثال: 1. التهيئة: يبدأ المتغير i بقيمة 1. 2. الشرط: تستمر الحلقة طالما أن i <= 5. 3. التحديث: يتم زيادة i بمقدار 1 بعد كل دورة. 4. كود التنفيذ: يتم تنفيذ console.log لطباعة القيمة الحالية لـ i.

مقارنة بين For و While:

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

أجزاء حلقة For في JavaScript: شرح مبسط وشامل

1. Initialization (التهيئة):

• يُستخدم هذا الجزء لتحديد نقطة البداية للحلقة.
• يتم عادةً تهيئة متغير العدّاد هنا.
• هذا الجزء يتم تنفيذه مرة واحدة فقط عند بدء الحلقة.

مثال:

for (let i = 0; ...; ...) {
      // ...
}

2. Condition (الشرط):

• الشرط الذي يجب أن يتحقق لتستمر الحلقة.
• يتم التحقق من الشرط قبل كل دورة.
• إذا تحقق الشرط (true)، تستمر الحلقة، وإذا لم يتحقق (false)، تنتهي.

مثال:

for (...; i < 6; ...) {
      // ...
}

3. Update (التحديث):

• يتم تحديث متغير العدّاد أو الحالة بعد كل دورة.
• عادةً ما يتم زيادة قيمة العدّاد لتجنب الحلقات اللانهائية.

مثال:

for (...; ...; i++) {
      // ...
}

4. Body (الجسم):

• هو الكود الذي يتم تنفيذه في كل دورة من الحلقة.
• قد يتضمن طباعة القيم، إجراء عمليات حسابية، أو أي منطق برمجي.

مثال عملي:

for (let i = 0; i < 6; i++) {
    console.log("القيمة الحالية لـ i:", i);
}

تحليل المثال: 1. Initialization: let i = 0 - المتغير i يبدأ من الصفر. 2. Condition: i < 6 - تستمر الحلقة طالما أن i أقل من 6. 3. Update: i++ - يتم زيادة i بمقدار 1 بعد كل دورة. 4. Body: طباعة القيمة الحالية لـ i.

خطوات عمل حلقة For خطوة بخطوة:

1. تهيئة المتغير (Initialization):

• الحلقة تبدأ بقيمة i = 0.

2. التحقق من الشرط (Condition):

• يتم التحقق إذا كانت i < 6. إذا كان الشرط صحيحًا، تنتقل الحلقة إلى تنفيذ الكود.

3. تنفيذ الكود داخل الجسم (Body):

• يتم تنفيذ الكود المطلوب، مثل طباعة القيمة.

4. التحديث (Update):

• يتم زيادة i بمقدار 1.

5. العودة للتحقق من الشرط:

• يتم العودة إلى الشرط للتأكد مما إذا كانت الحلقة ستستمر.

6. إنهاء الحلقة:

• عندما يصبح الشرط خاطئًا (false)، تنتهي الحلقة.

التفسير باستخدام الجدول:

الدورة	i (التهيئة)	الشرط (i < 6)	الكود المنفذ	التحديث (i++)
1	0	صحيح	طباعة 0	i = 1
2	1	صحيح	طباعة 1	i = 2
3	2	صحيح	طباعة 2	i = 3
4	3	صحيح	طباعة 3	i = 4
5	4	صحيح	طباعة 4	i = 5
6	5	صحيح	طباعة 5	i = 6
-	6	خطأ	-	-

مقارنة مع حلقات While:

• For Loop: تتيح تنظيم الكود بشكل مُدمج ومناسب للحالات التي تعرف فيها عدد التكرارات.
• While Loop: تُستخدم عندما تكون الشروط أكثر ديناميكية، أو إذا لم تكن تعرف عدد التكرارات مسبقًا.

حلقة For تمنحك طريقة قوية وواضحة لتكرار العمليات البرمجية. إذا كنت تعرف نقطة البداية، الشرط، وطريقة التحديث، فإن حلقة For هي الخيار الأمثل لتحقيق ذلك.

الحلقات المتداخلة (Nested Loops) في JavaScript

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

بنية الحلقات المتداخلة

for (let x = 0; x < الحد_الخارجي; x++) {
   for (let y = 0; y < الحد_الداخلي; y++) {
      // التعليمات التي سيتم تنفيذها في كل دورة
   }
}

• الحلقة الخارجية (x): تتحكم في عدد الدورات العامة.
• الحلقة الداخلية (y): تعمل بشكل كامل داخل كل دورة من دورات الحلقة الخارجية.

مثال على الحلقات المتداخلة

for (let x = 0; x < 3; x++) {
    for (let y = 0; y < 2; y++) {
        console.log(`x: ${x}, y: ${y}`);
    }
}

الشرح خطوة بخطوة

1. بداية الحلقة الخارجية (x = 0)

• يتم تهيئة المتغير x إلى 0.
• يتم التحقق من الشرط x < 3، والنتيجة هي true. ندخل الحلقة الخارجية.

2. بداية الحلقة الداخلية (y = 0)

• يتم تهيئة المتغير y إلى 0.
• يتم التحقق من الشرط y < 2، والنتيجة هي true. ندخل الحلقة الداخلية.
• يتم طباعة القيم x: 0, y: 0.

3. زيادة قيمة y

• يتم زيادة y بمقدار 1 (y = 1).
• التحقق من الشرط y < 2، والنتيجة هي true. ندخل الحلقة الداخلية مجددًا.
• يتم طباعة القيم x: 0, y: 1.

4. الخروج من الحلقة الداخلية

• يتم زيادة y إلى 2.
• يتم التحقق من الشرط y < 2، والنتيجة هي false. نخرج من الحلقة الداخلية.

5. زيادة قيمة x واستمرار الحلقة الخارجية

• يتم زيادة x بمقدار 1 (x = 1).
• يتم التحقق من الشرط x < 3، والنتيجة هي true. ندخل الحلقة الخارجية مجددًا.

6. تكرار الخطوات

• يتم تشغيل الحلقة الداخلية بالكامل لكل قيمة من قيم x حتى تصبح قيمة x تساوي 3، حيث يتوقف تنفيذ الحلقة الخارجية لأن الشرط x < 3 يصبح false.

الإخراج المتوقع

عند تنفيذ الكود أعلاه، سيكون الإخراج:

x: 0, y: 0
x: 0, y: 1
x: 1, y: 0
x: 1, y: 1
x: 2, y: 0
x: 2, y: 1

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

زيادة ونقصان القيم باستخدام العوامل المختصرة في JavaScript

في البرمجة، هناك طرق متعددة لزيادة أو تقليل قيمة المتغيرات أثناء تنفيذ الحلقات (Loops) أو العمليات الحسابية الأخرى. هذا يساعد في تسريع الكتابة وتقليل التكرار في الكود.

عامل الزيادة (Increment)

عامل الزيادة يستخدم لزيادة قيمة المتغير بمقدار 1. يمكن كتابته بطريقتين:

1. x++:

• يُضاف 1 إلى x بعد استخدام قيمتها.
• يُسمى “زيادة بعدية” (Post-Increment).
• يُرجع القيمة الأصلية للمتغير قبل زيادته.

مثال:

let x = 0;
console.log(x++); // يطبع 0، ثم تصبح x = 1
console.log(x);   // يطبع 1

2. ++x:

• يُضاف 1 إلى x قبل استخدامها.
• يُسمى “زيادة قبلية” (Pre-Increment).
• يُرجع القيمة الجديدة للمتغير بعد زيادته.

مثال:

let x = 0;
console.log(++x); // يطبع 1، ثم تصبح x = 1
console.log(x);   // يطبع 1

عامل النقصان (Decrement)

عامل النقصان يعمل بنفس طريقة الزيادة ولكن يقلل القيمة بمقدار 1.

1. x--:

• يُنقص 1 من x بعد استخدامها.
• يُسمى “نقصان بعدي” (Post-Decrement).

مثال:

let y = 5;
console.log(y--); // يطبع 5، ثم تصبح y = 4
console.log(y);   // يطبع 4

2. --x:

• يُنقص 1 من x قبل استخدامها.
• يُسمى “نقصان قبلي” (Pre-Decrement).

مثال:

let y = 5;
console.log(--y); // يطبع 4، ثم تصبح y = 4
console.log(y);   // يطبع 4

عمليات رياضية مختصرة

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

1. الضرب المختصر (Multiplication):

• يمكن ضرب قيمة المتغير في رقم معين باستخدام العامل *=.

مثال:

let z = 10;
z *= 8;  // يضرب قيمة z في 8، ويصبح z = 80
console.log(z);  // يطبع 80

2. القسمة المختصرة (Division):

• يمكن قسمة قيمة المتغير على رقم معين باستخدام العامل /=.

مثال:

let z = 80;
z /= 4;  // يقسم قيمة z على 4، ويصبح z = 20
console.log(z);  // يطبع 20

3. الجمع والطرح المختصر (Addition and Subtraction):

• يمكن استخدام += للجمع و -= للطرح.

مثال:

let a = 5;
a += 3;  // يجمع 3 إلى a، ويصبح a = 8
console.log(a);  // يطبع 8

a -= 2;  // يطرح 2 من a، ويصبح a = 6
console.log(a);  // يطبع 6

متى تستخدم هذه العوامل؟

• الزيادة والنقصان: يمكن استخدام ++ و -- في الحلقات أو العمليات التي تحتاج إلى زيادة أو تقليل قيمة المتغير بسرعة.
• العمليات الرياضية المختصرة: تستخدم هذه العوامل لتقليل الكود وزيادة وضوحه، خاصة في الحلقات أو العمليات الحسابية المعقدة.

تساعد العوامل المختصرة مثل ++, --, +=, -=, *=, /= في تقليل حجم الكود وجعل البرمجة أكثر كفاءة. يمكن استخدامها في الحلقات أو أي جزء من الكود يتطلب تعديلاً سريعاً للقيم.

خاتمة

في هذا المقال، استعرضنا كيفية استخدام الحلقات التكرارية في JavaScript، حيث رأينا كيف يمكن استخدام الحلقات مثل for و while لتكرار العمليات بشكل فعال.

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

كما تعرفنا سابقاٌ على الجمل الشرطية وفهم الخوارزميات البرمجية بإستخدام الجافاسكربت.

الأسئلة الشائعة

ما هي الحلقات التكرارية في JavaScript ولماذا تُستخدم؟

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

ما الفرق بين أنواع الحلقات التكرارية مثل for وwhile وdo...while؟

حلقة for تُستخدم عندما يكون لديك عدد محدد من التكرارات، بينما while تُنفذ الكود طالما الشرط صحيح، وdo...while تُنفذ الكود مرة واحدة على الأقل قبل التحقق من الشرط.

كيف يمكنني استخدام الحلقات التكرارية مع المصفوفات (Arrays)؟

يمكنك استخدام حلقة for أو forEach للتكرار على عناصر المصفوفة وتنفيذ عمليات عليها بسهولة.

ما هي الأخطاء الشائعة عند استخدام الحلقات التكرارية في JavaScript؟

من الأخطاء الشائعة: إنشاء حلقات لا نهائية بسبب شروط غير صحيحة، أو عدم تحديث المتغير المسؤول عن الشرط داخل الحلقة.

كيف يمكن تحسين أداء الحلقات التكرارية في JavaScript؟

يمكن تحسين الأداء باستخدام حلقات محسنة مثل for...of مع المصفوفات أو تجنب العمليات الثقيلة داخل الحلقة.

تعديل المقال