كيفية استخدام الحلقات في JavaScript

يتيح لك التكرار التكرار خلال كل عنصر في مصفوفة بحيث يمكنك تخصيص وإخراج كل عنصر كما تريد. كما هو الحال مع كل لغة برمجة ، تعد الحلقات أداة مهمة لعرض المصفوفات في JavaScript أيضًا.

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

التزايدي والتنازلي لـ Loop في JavaScript

التزايدي ل الحلقة هي أساس التكرار في JavaScript.

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

إليك كيف يبدو تركيبها العام:

لـ (var i = القيمة الأولية ؛ أنا أنا ++) {
مجموعة [i]}

الآن دعنا نكرر من خلال مصفوفة باستخدام بناء الجملة الأساسي أعلاه:

anArray = [1، 3، 5، 6] ؛
لـ (دع أنا = 0 ؛ أنا console.log (anArray [i])
}
انتاج:
1
3
5
6 

سنعمل الآن على كل عنصر في المصفوفة أعلاه باستخدام JavaScript ل حلقة:

anArray = [1، 3، 5، 6] ؛
لـ (دع أنا = 0 ؛ أنا console.log ("5"، "x"، anArray [i]، "="، anArray [i] * 5)
}
انتاج:
5 × 1 = 5
5 × 3 = 15
5 × 5 = 25
5 × 6 = 30 

تتكرر الحلقة خلال المصفوفة بشكل تدريجي باستخدام امتداد ++ عامل ، ينتج مخرجات مرتبة.

لكن باستخدام السلبية (--) ، يمكنك عكس الإخراج.

الصيغ هي نفسها ، لكن المنطق مختلف قليلاً عن حلقة الزيادة أعلاه.

إليك كيفية عمل الطريقة التنازلية:

anArray = [1، 3، 5، 6] ؛
لـ (let i = anArray.length-1 ؛ أنا> = 0 ؛ أنا--) {
console.log ("5"، "x"، anArray [i]، "="، anArray [i] * 5)
}
انتاج:
5 × 6 = 30
5 × 5 = 25
5 × 3 = 15
5 × 1 = 5

المنطق وراء الكود أعلاه ليس بعيد المنال. تبدأ فهرسة المصفوفة من الصفر. لذا داعيا صفيف [i] يتكرر عادةً من الفهرس صفر إلى ثلاثة لأن المصفوفة أعلاه تحتوي على أربعة عناصر.

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

إنها تحافظ على فهرس الصفيف أقل من طوله. الحالة أنا> = 0 ثم يجبر العد على التوقف عند العنصر الأخير في المصفوفة.

متعلق ب: طرق مصفوفة جافا سكريبت يجب أن تتقنها اليوم

جافا سكريبت لكل

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

إليك الصيغة العامة لجافا سكريبت لكل:

array.forEach (عنصر => {
عمل
})

ألق نظرة على كيفية عملها في الممارسة:

دع anArray = [1، 3، 5، 6] ؛
anArray.forEach (x => {
console.log (x)
});
انتاج:
1
3
5
6 

استخدم الآن هذا لتشغيل عملية حسابية بسيطة على كل عنصر كما فعلت في القسم السابق:

دع anArray = [1، 3، 5، 6] ؛
anArray.forEach (x => {
console.log ("5"، "x"، x، "="، x * 5)
});
انتاج:
5 × 1 = 5
5 × 3 = 15
5 × 5 = 25
5 × 6 = 30 

كيفية استخدام for... in Loop of JavaScript

ال لـ... في loop في JavaScript تتكرر عبر مصفوفة وتُعيد فهرسها.

ستجده سهل الاستخدام لـ... في إذا كنت مألوفًا حلقة for في بايثون لأنها متشابهة من حيث البساطة والمنطق.

ألق نظرة على تركيبها العام:

لـ (دع العنصر في المصفوفة) {
عمل 
}

لذلك لـ... في حلقة تعين كل عنصر في مصفوفة إلى المتغير (العنصر) المعلن داخل الأقواس.

وبالتالي ، فإن تسجيل العنصر مباشرة داخل الحلقة يؤدي إلى إرجاع فهرس مصفوفة وليس العناصر نفسها:

دع anArray = [1، 3، 5، 6] ؛
لـ (اسمح لي بالدخول إلى anArray) {
console.log (ط)
}
انتاج:
0
1
2
3 

لإخراج كل عنصر بدلاً من ذلك:

دع anArray = [1، 3، 5، 6] ؛
لـ (اسمح لي بالدخول إلى anArray) {
console.log (anArray [i])
}
انتاج:
1
3
5
6 

كما فعلت عند استخدام الحلقة التنازلية ، من السهل أيضًا عكس الإخراج باستخدام لـ... في:

دع anArray = [1، 3، 5، 6] ؛
// احذف واحدًا من طول المصفوفة وعيّنه لمتغير:
دع v = anArray.length - 1 ؛ 
// استخدم المتغير أعلاه كأساس فهرس أثناء تكرار المصفوفة:
لـ (اسمح لي بالدخول إلى anArray) {
console.log (anArray [v])
ت - = 1 ؛
}
انتاج:
6
5
3
1 

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

JavaScript لـ... من Loop

ال لـ... من حلقة تشبه لـ... في حلقة.

ومع ذلك ، على عكس لـ... في، لا يتكرر من خلال فهرس المصفوفة ولكن العناصر نفسها.

يبدو تركيبها العام كما يلي:

لـ (دعني من مجموعة) {
عمل 
}

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

دع anArray = [1، 3، 5، 6] ؛
لـ (اسمح لي من anArray) {
console.log (ط)
}
انتاج:
1
3
5
6 

يمكنك أيضًا استخدام هذه الطريقة لتكرار المصفوفة وعكس الإخراج. إنه مشابه لكيفية استخدامه لـ... في:

دع anArray = [1، 3، 5، 6] ؛
دع v = anArray.length - 1 ؛
لـ (دع x من anArray) {
console.log (anArray [v])
ت - = 1 ؛
}
انتاج:
6
5
3
1

للعمل ضمن الحلقة:

دع anArray = [1، 3، 5، 6] ؛
دع v = anArray.length - 1 ؛
لـ (دع x من anArray) {
console.log ("5"، "x"، anArray [v]، "="، anArray [v] * 5)
ت - = 1 ؛
}
انتاج:
5 × 6 = 30
5 × 5 = 25
5 × 3 = 15
5 × 1 = 5 

بينما حلقة

ال في حين تعمل الحلقة بشكل مستمر طالما ظل الشرط المحدد صحيحًا. غالبًا ما تستخدم كحلقة لا نهائية.

على سبيل المثال ، نظرًا لأن الصفر دائمًا أقل من عشرة ، فإن الكود أدناه يعمل بشكل مستمر:

دعني = 0 ؛
بينما (أنا <10) {
console.log [4)
}

الكود أعلاه يسجل "4" إلى ما لا نهاية.

دعنا نكرر من خلال مصفوفة باستخدام في حين حلقة:

دعني = 0 ؛
بينما (i ​​console.log (anArray [i])
أنا + = 1
}
انتاج:
1
3
5
6 

JavaScript تفعل... بينما Loop

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

إليك كيف تبدو:

فعل{
أجراءات
}
في حين (
إرادة
)

الآن دعنا نكرر عبر مصفوفة باستخدام هذا التابع looping:

فعل{
console.log (anArray [i])
أنا + = 1
}
في حين (
أنا )
انتاج:
1
3
5
6 

تعرف على حلقات جافا سكريبت

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

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

كيفية استخدام بيان JavaScript if-else

عبارة if-else هي خطوتك الأولى نحو منطق البرمجة في تطبيقاتك.

اقرأ التالي

نبذة عن الكاتب