شرح كل نوع من أنواع حلقات JavaScript: [With Codeblocks and Examples]
تعد JavaScript من بين لغات البرمجة الأكثر استخدامًا. يجب أن يتعلم المطورون الذين ينوون أن يصبحوا مهندسي JavaScript أساسيات الحلقات وأنواعها وكيفية عملها.
حلقة JavaScript هي أداة تستخدم لأداء مهام متكررة بناءً على حالة معينة. من ناحية أخرى ، “التكرار” هو مصطلح عام ، بمعنى التكرار في سياق الحلقة. ستستمر الحلقة في التكرار حتى يتم استيفاء شرط التوقف.
لفهمها بشكل أفضل ، يمكنك التفكير فيها على أنها لعبة محوسبة حيث يُطلب منك اتخاذ خطوات X شمالًا ثم خطوات Y إلى اليسار.
يمكنك تمثيل 7 خطوات باتجاه الشمال على النحو التالي:
for (let step = 0; step < 7; step++) {
// Runs 7 times, with values of steps 0 through 6.
console.log("Walking northwards one step");
}
عندما يتم تنفيذ كتلة الكود أعلاه ، سيكون لديك هذا ؛
لماذا تستخدم الحلقات عادة؟
- أداء المهام المتكررة: يمكنك استخدام الحلقات لتنفيذ التعليمات حتى يتم استيفاء شروط معينة.
- التكرار فوق الكائنات أو المصفوفات: باستخدام الحلقات ، يمكنك تكرار خصائص كائن أو عناصر مصفوفة ، مما يسمح لك بتنفيذ إجراءات معينة لكل خاصية أو عنصر.
- تصفية البيانات: يمكنك استخدام حلقة لتصفية البيانات بناءً على شروط معينة.
تأتي حلقات JavaScript في أشكال مختلفة ؛ من أجل ، بينما ، افعل … بينما ، من أجل … من ، ومن أجل … في. دعونا نستكشفها بالتفصيل ونوضح كيف يعمل كل منها.
لحلقة
تتكرر حلقة for حتى يتم تقييم الشرط المحدد إلى صحيح. تحتوي الحلقة for على ثلاثة تعبيرات اختيارية ، متبوعة بمقطع التعليمات البرمجية.
for (initialization; condition; finalExpression) {
// code
}
- يأتي تعبير التهيئة قبل تنفيذ الحلقة الأولى. عادة ما يقوم هذا التعبير بتهيئة عداد واحد أو أكثر.
- يتم التحقق من تعبير الشرط في كل مرة قبل تشغيل الحلقة for. يتم تنفيذ الكود الموجود في الحلقة أو العبارة في كل مرة يتم فيها تقييم التعبير إلى صحيح. من ناحية أخرى ، تتوقف الحلقة عندما يكون التعبير خطأ. ومع ذلك ، إذا تم حذف التعبير ، فسيتم تقييم التعبير تلقائيًا إلى صواب.
- يتم تنفيذ التعبير النهائي بعد كل تكرار حلقي. يستخدم التعبير في الغالب لزيادة العداد.
يمكنك استخدام {} ، كتلة البيان ، لتجميع وتنفيذ عدة جمل. إذا كنت تريد الخروج من الحلقة مبكرًا قبل تقييم تعبير الشرط إلى خطأ ، فاستخدم تعليمة break.
أمثلة على حلقات for مع التعليمات البرمجية
for (let i = 0; i < 7; i++) {
console.log(i);
}
في كتلة التعليمات البرمجية هذه ؛
- يتم تهيئة المتغير i إلى الصفر (دع i = 0).
- الشرط هو أن أكون أقل من 7 (أنا = 7).
- ستتكرر الحلقة بشكل متكرر إذا كانت قيمة i أقل من 7 (i <7>.
- سيضيف التكرار 1 إلى قيمة i بعد كل تكرار (++ 1).
for (let i = 1; i < 11; i += 2) {
if (i === 9) {
break;
}
console.log('Total developers: ' + i);
}
- تتكرر كتلة التعليمات البرمجية من 1 إلى 10 (أنا <11).
- الحلقة تهيئ متغير i بقيمة 1 (دع i = 1).
- ستستمر حالة الحلقة في التنفيذ إذا كانت قيمة i أقل من 11 (i <11).
- تزيد قيمة i بمقدار 2 بعد كل تكرار (i + = 2).
تقوم عبارة if بتقييم ما إذا كانت قيمة i = 9. إذا كان الشرط صحيحًا ، فسيتم تنفيذ تعليمة break ، وتنتهي الحلقة.
(صورة)
من أجل … من الحلقة
تتكرر حلقة for… of على كائنات قابلة للتكرار مثل Map و Array و Arguments و Set. تستدعي هذه الحلقة ربط تكرار مخصص مع عبارات يتم تنفيذها لقيمة كل خاصية مميزة.
إن البنية الأساسية لحلقة for… loop هي ؛
for (variable of object) statement
أمثلة على … من الحلقة قيد التشغيل
const frontendLanguages = [ "HTML", "CSS", "JavaScript" , “React”];
for (let i of frontendLanguages) {
console.log(i);
}
في هذا الرمز ؛
- نحدد مصفوفة تسمى frontendLanguages
- تتكون المصفوفة من ثلاثة عناصر ؛ “HTML” و “CSS” و “JavaScript” و “React”.
- تتكرر حلقة for… of فوق كل عنصر في FrontendLanguages.
- يأخذ i في كتلة التعليمات البرمجية قيمة كل عنصر أثناء كل تكرار والقيم المطبوعة على وحدة التحكم.
const s = new Set();
s.add(2);
s.add("grey");
for (let n of s) {
console.log(n);
}
في هذه الكتلة من التعليمات البرمجية ؛
- نعلن عن متغير s ، والذي نقوم بتعيينه لمجموعة جديدة باستخدام مُنشئ Set ().
- يتم إضافة عنصرين إلى الكود باستخدام طريقة add ()
- يتكرر for…. من فوق كائن العناصر.
- تقوم الحلقة بتعيين العنصر الحالي إلى n قبل تنفيذ عبارة console.log (n).
const m = new Map();
m.set(4, "rabbit");
m.set(6, "monkey");
m.set(8, "elephant");
m.set(10, "lion");
m.set(12, "leopard");
for (let n of m) {
console.log(n);
}
في كتلة التعليمات البرمجية هذه ؛
- نستخدم مُنشئ Map () لإنشاء كائن Map جديد.
- يتم التصريح عن متغير م.
- باستخدام طريقة .set () ، نضيف خمسة أزواج من المفاتيح والقيمة.
- تتكرر A for… of loop على عناصر كائن الخريطة m.
من أجل … في الحلقة
تستخدم حلقة for… in loop لتكرار خصائص الكائن. الهيكل الأساسي لـ for… in loop هو ؛
for (property in object) {
// code
}
يمكنك استخدام for… in loop للتكرار عبر المصفوفات والكائنات التي تشبه المصفوفة.
const shoppingList = { kales: 4, tomatoes: 2, cabbage: 0, lettuce:6, pumpkin:5 };
for (const vegetable in shoppingList) {
console.log(vegetable);
}
في كتلة التعليمات البرمجية هذه ؛
- نقدم كائن JavaScript ونطلق عليه قائمة التسوق.
- نستخدم حلقة for للتكرار على كل خاصية في قائمة التسوق باستخدام عامل التشغيل in.
- في كل تكرار ، تقوم الحلقة بتعيين اسم الخاصية الحالية في قائمة التسوق.
بينما
تقوم حلقة while بتقييم شرط ، إذا وجدت أنه صحيح ، يتم تنفيذ كتلة التعليمات البرمجية. ومع ذلك ، إذا كان الشرط خاطئًا ، تنتهي الحلقة ولن يتم تنفيذ كتلة التعليمات البرمجية.
هذا هو الهيكل الأساسي لحلقة while ؛
while (condition) Statement
يجب أن تحدث حالة الاختبار قبل تنفيذ العبارة في الحلقة. يمكنك تنفيذ عدة جمل باستخدام {} أو حظر العبارات.
مثال على حلقة أثناء العمل
let n = 0;
while (n < 9) {
console.log(n);
n++;
}
في هذا الرمز ؛
- يتم تهيئة المتغير n بقيمة صفرية (دع n = 0).
- سيتم تنفيذ الحلقة طالما أن قيمة n أقل من 9 (n <9)
- يتم عرض قيمة n على وحدة التحكم وزيادة بمقدار 1 بعد كل تكرار (n ++)
- سيتوقف الرمز عن التنفيذ عند 8.
افعل … أثناء التكرار
تتكرر حلقة “do… while loop” حتى يتم تقييم حالة معينة إلى “خطأ”.
الهيكل العام لـ do… while statement هو؛
do statement while (condition);
يتم تنفيذ البيان مرة واحدة ولكن قبل التحقق من الشرط. سيتم تنفيذ البيان إذا كان الشرط صحيحًا. ومع ذلك ، إذا كان الشرط الذي تم تقييمه خاطئًا ، فسيتوقف التنفيذ ، وينتقل عنصر التحكم إلى العبارة بعد do .. أثناء ذلك. الكود في do… while loop مضمون للتشغيل مرة واحدة على الأقل ، حتى لو تم تقييم الشرط على صحيح.
مثال على فعل… while
let n = 0;
do {
n += 1;
console.log(n);
} while (n < 7);
في هذا الرمز ؛
- نقدم متغير n وقمنا بتعيين قيمته الأولية على 0 (دع n = 0).
- يدخل متغيرنا n إلى do… while loop حيث تزداد قيمته بمقدار 1 بعد كل تكرار (n + = 1)
- يتم تسجيل قيمة n.
- ستستمر الحلقة في التنفيذ طالما أن قيمة n أقل من 7 (n <7).
عند تشغيل هذا الرمز ، ستعرض وحدة التحكم قيم n بدءًا من 1 إلى 7 أثناء تنفيذ الحلقة 7 مرات.
حلقة متداخلة
الحلقة المتداخلة هي حالة يكون لدينا فيها حلقة داخل حلقة. على سبيل المثال ، يمكن أن يكون لدينا حلقة for متداخلة داخل حلقة for أخرى.
for (let outer = 0; outer < 5; outer += 2) {
for (let inner = 0; inner < 6; inner += 2) {
console.log(`${outer}-${inner}`);
}
}
- هناك نوعان من المتغيرات. الخارجي والداخلي وكلاهما تمت تهيئتهما بالقيمة صفر.
- يتم زيادة كلا المتغيرين بمقدار 2 بعد كل تكرار
- تتكرر الحلقات الخارجية والداخلية ثلاث مرات لكل منهما.
بيانات التحكم في الحلقة
تعمل عبارات التحكم في الحلقة ، التي تُعرف أحيانًا باسم “عبارات الانتقال” ، على مقاطعة التدفق الطبيعي للبرنامج. استراحة ومتابعة هي أمثلة على عبارات التحكم في الحلقة.
بيانات كسر
تنهي عبارات Break حلقة على الفور ، حتى لو لم يتم الوفاء بالشرط.
for (let n = 1; n <= 26; n++) {
if (n === 13) {
console.log("Loop stops here. We have reached the break statement");
break;
}
console.log(n);
}
سيظهر الرمز المقدم كـ ؛
تواصل البيانات
تُستخدم عبارات Continue لتخطي كتلة معينة من التعليمات البرمجية وتنفيذ التكرار للحلقة الجديدة.
for (let n = 0; n <= 10; n++) {
if (n === 5) {
continue;
}
console.log(n);
}
سيظهر الرمز المقدم كـ ؛
خاتمة
أعلاه هي الحلقات الشائعة التي ستصادفها في Vanilla JavaScript وأطرها / مكتباتها. كما هو موضح ، كل نوع حلقة له حالة استخدامه وسلوكيات مختلفة. إذا اخترت نوع الحلقة الخاطئ ، فمن المحتمل أن يكون لديك أخطاء ، ومن المحتمل أن تعرض شفرتك سلوكًا غير متوقع.
إذا كنت تتعامل مع إطار عمل أو مكتبة JavaScript ، فتحقق دائمًا من وثائقها واستخدم الحلقات المضمنة.
