حتى الآن، كل مثال في Pocket جمع عددًا ثابتًا من المصاريف: coffee + lunch + bus. لكن الإنفاق الحقيقي قائمة تكبر كل يوم، ولا يمكنك كتابة + لعناصر لم تصلك بعد. تحتاج إلى طريقة تقول بها “افعل هذا لكل واحد منها”، وهذه هي حلقة التكرار (loop).
للقوائم درس كامل في القسم 3، لكنك تحتاج أساسياتها الآن. قائمة القيم بين أقواس مربّعة اسمها مصفوفة (array):
\nconst amounts = [450, 1220, 270, 899];\nconsole.log(amounts.length); // how many items\nconsole.log(amounts[0]); // the first item: positions start at 0تنفّذ for...of كتلتها مرة لكل عنصر، مع اسم تختاره أنت يشير إلى العنصر الحالي:
const amounts = [450, 1220, 270, 899];\n\nlet total = 0;\nfor (const amount of amounts) {\n total += amount;\n}\nconsole.log(total);تتبّعها خطوة بخطوة كما يفعل المحرّك. يبدأ total من 0. الدورة الأولى: amount تساوي 450، فيصبح total يساوي 450. الدورة الثانية: amount تساوي 1220، فيصبح total يساوي 1670. ثم 1940، ثم 2839. لم يتبقَّ أي عنصر، فتنتهي الحلقة ويطبع السطر التالي المجموع.
يُسمّى هذا الشكل نمط المُراكِم (accumulator pattern): صرّح بنتيجة قبل الحلقة، وحدّثها داخلها، واستخدمها بعدها. وهو وراء المجاميع والأعداد والقيم القصوى ومعظم الملخّصات التي ستكتبها. واستخدام const amount سليم مع أنها تتغيّر في كل دورة: فكل دورة تُنشئ amount جديدة، ولا يُعاد إسنادها أبدًا.
وتعمل for...of أيضًا مع النصوص، حرفًا حرفًا: for (const ch of "Pocket").
أحيانًا تحتاج إلى الموضع إلى جانب العنصر، مثلًا لتطبع “1. Coffee”. لحلقة for الكلاسيكية ثلاثة أجزاء بين قوسيها:
const labels = [\"Coffee\", \"Lunch\", \"Bus\"];\n\nfor (let i = 0; i < labels.length; i++) {\n console.log(`${i + 1}. ${labels[i]}`);\n}جزء البداية، let i = 0، يُنفَّذ مرة واحدة. ثم قبل كل دورة يُفحص الشرط i < labels.length؛ فإن كان صحيحًا نُفّذ الجسم، ثم يضيف التحديث i++ واحدًا إلى i. وحين يصبح الشرط خاطئًا تنتهي الحلقة. مع ثلاث تسميات، تأخذ i القيم 0 و1 و2، وهي الفهارس الصالحة بالضبط.
حلقة while ليس فيها إلا شرط. إنها للحالات التي تعرف فيها متى تتوقّف، لكن لا تعرف كم دورة سيستغرق ذلك. كم يومًا تستطيع أن تشتري قهوة بـ 4.50 دولار بميزانية قدرها 20 دولارًا؟
let balance = 2000;\nconst coffee = 450;\nlet days = 0;\n\nwhile (balance >= coffee) {\n balance -= coffee;\n days++;\n}\nconsole.log(`${days} coffees, ${balance} cents left`);كل دورة تُنقص balance، فيصبح الشرط خاطئًا في النهاية. ولو لم يكن في الجسم ما يقترب من المخرج، كأن تنسى balance -= coffee، لبقي الشرط صحيحًا إلى الأبد. وهذه حلقة لا نهائية (infinite loop): تتجمّد الصفحة، ويعرض عليك المتصفّح في النهاية إيقاف السكربت. وحين يتجمّد تبويب أثناء تدرّبك، ابحث عن حلقة لا يتغيّر شرطها أبدًا.
كلمتان مفتاحيتان تغيّران مسار الحلقة من داخلها:
\nbreak تُنهي الحلقة فورًا.continue تتخطّى باقي هذه الدورة وتنتقل إلى التالية.const amounts = [450, -300, 1220, 270, 899];\nconst budget = 2000;\nlet running = 0;\n\nfor (const amount of amounts) {\n if (amount < 0) {\n continue; // a refund: not spending, skip it\n }\n running += amount;\n if (running > budget) {\n console.log(`Budget passed at an expense of ${amount}`);\n break; // no need to look further\n }\n}\nconsole.log(running);تتبّعها: يُضاف 450، ثم يُتخطّى -300، ثم يرفع 1220 المجموع إلى 1670، ثم يرفعه 270 إلى 1940، ثم يدفعه 899 إلى 2839، وهذا يتجاوز الميزانية، فتُطبع الرسالة وتتوقّف الحلقة.
\nالحلقات هي المكان الذي يفقد فيه المبتدئون أثر ما يفعله البرنامج أكثر من أي مكان آخر، لأن الأسطر نفسها تُنفَّذ مرات كثيرة بقيم مختلفة. والعلاج أن تجعل الحلقة تُريك. ضع console.log في أول الجسم يطبع كل متغيّر له علاقة:
const amounts = [450, 1220, 270];\nlet total = 0;\nfor (let i = 0; i < amounts.length; i++) {\n console.log({ i, amount: amounts[i], totalBefore: total });\n total += amounts[i];\n}\nconsole.log(\"final\", total);كل دورة تطبع سطرًا واحدًا، فتستطيع أن تقارن ما حدث فعلًا بما توقّعته، وتجد أول دورة يختلفان فيها. تلك الدورة هي مكان الخطأ. ووضع القيم داخل { } يطبعها مع أسمائها، فلا تحتاج إلى تخمين أيّ رقم هو أيّ متغيّر. المطوّرون المحترفون يفعلون هذا بالضبط كل يوم؛ وفي القسم 5 ستتعلّم فعله أيضًا باستخدام مصحّح الأخطاء (debugger) في DevTools.
الحلقات والشروط معًا تتيح لك كتابة منطق حقيقي من الآن. ولكي تعيد استخدام هذا المنطق بدلًا من نسخه، تحتاج إلى دوالّك الخاصة، وهذا موضوع الدرس التالي.
\n","toc":[{"id":"sec-1","text":"قائمة نمرّ عليها","level":2},{"id":"sec-2","text":"for…of: افعل هذا لكل عنصر","level":2},{"id":"sec-3","text":"حلقة for العدّادة","level":2},{"id":"sec-4","text":"while: كرّر حتى يتغيّر شيء ما","level":2},{"id":"sec-5","text":"break وcontinue","level":2},{"id":"sec-6","text":"أن ترى ما تفعله الحلقة","level":2}],"takeaways":["for...of تمرّ على كل عنصر في القائمة بالترتيب، وهي حلقة التكرار الافتراضية لـ “افعل هذا لكل مصروف”.","حلقة for العدّادة تعطيك فهرسًا، وتحتاجه حين يهمّ الموضع؛ والفهارس الصالحة تمتد من 0 إلى length - 1.","while تكرّر ما دام الشرط صحيحًا، لذلك يجب أن يجعله شيء داخل الحلقة خاطئًا في النهاية.","نمط المُراكِم (ابدأ من 0، وأضف داخل الحلقة، واستخدم الناتج بعدها) يحوّل قائمة إلى مجموع واحد."],"further":[{"title":"Loops and iteration (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration"},{"title":"for...of (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of"}],"quiz":[{"q":"ماذا يطبع هذا الكود؟
\nconst amounts = [400, 900, 250];\nlet total = 0;\nfor (const a of amounts) {\n total = a;\n}\nconsole.log(total);1550","why":"هذا يتطلّب total += a. أما = وحدها فتستبدل المجموع بكل مبلغ بدلًا من أن تضيفه إليه."},{"text":"250","why":"صحيح. كل دورة تكتب فوق total، فينتهي حاملًا المبلغ الأخير."},{"text":"400","why":"تستمر الحلقة بعد العنصر الأول، وكل دورة تعيد إسناد total."},{"text":"0","why":"يُعاد إسناد total داخل الحلقة، فلا يبقى حاملًا قيمته الابتدائية."}],"answer":1},{"q":"const days = ["Mon", "Tue", "Wed"]; أيّ حلقة لا ترمي أي خطأ لكنها تطبع undefined مرة واحدة في النهاية؟
for (let i = 0; i < days.length; i++) console.log(days[i]);","why":"هذه هي الحلقة العدّادة الصحيحة. إنها تتوقّف بعد الفهرس 2، وهو آخر فهرس صالح."},{"text":"for (const d of days) console.log(d);","why":"for...of تمرّ على العناصر الموجودة فعلًا فقط، فلا يمكنها تجاوز النهاية."},{"text":"for (let i = 0; i <= days.length; i++) console.log(days[i]);","why":"صحيح. <= تسمح لـ i بأن تبلغ 3، وdays[3] غير موجود، فيُطبع undefined. وخطأ “الفارق بواحد” هذا شائع جدًا."}],"answer":2},{"q":"متى تكون while أنسب من for...of؟
for...of، التي لا يمكنها تجاوز النهاية ولا نسيان التقدّم."},{"text":"حين يكون جسم الحلقة أكثر من سطر واحد.","why":"يمكن لأي حلقة أن يكون جسمها بأي طول. والاختيار يعتمد على ما يتحكّم في التكرار."}],"answer":0},{"q":"داخل حلقة تمرّ على المصاريف، ماذا تفعل continue؟
break. أما continue فتتخطّى باقي الدورة الحالية فقط."},{"text":"تتخطّى باقي الدورة الحالية وتنتقل إلى العنصر التالي.","why":"صحيح. إنها مفيدة لتجاهل العناصر غير المعنية، مثل المبالغ المستردّة، دون أن تضع باقي الجسم داخل if."},{"text":"تعيد تشغيل الحلقة من العنصر الأول.","why":"الحلقات لا ترجع إلى الوراء من تلقاء نفسها. continue تتقدّم إلى العنصر التالي."}],"answer":1}],"exercise":{"kind":"web","mode":"js","starter":{"js":"const amounts = [450, -300, 1220, 270, 899];\n\n// Total of all spending; negative amounts are refunds, skip them\nfunction totalSpent(amounts) {\n let total = 0;\n // loop here\n return total;\n}\n\n// How many amounts are at least `minimum`\nfunction countAtLeast(amounts, minimum) {\n return 0;\n}\n\n// The index of the expense at which the running total of spending\n// first goes over `budget`, or -1 if it never does (skip refunds here too)\nfunction firstOverBudget(amounts, budget) {\n return -1;\n}\n\nconsole.log(totalSpent(amounts), countAtLeast(amounts, 500), firstOverBudget(amounts, 2000));\n"},"solution":{"js":"const amounts = [450, -300, 1220, 270, 899];\n\nfunction totalSpent(amounts) {\n let total = 0;\n for (const amount of amounts) {\n if (amount < 0) {\n continue;\n }\n total += amount;\n }\n return total;\n}\n\nfunction countAtLeast(amounts, minimum) {\n let count = 0;\n for (const amount of amounts) {\n if (amount >= minimum) {\n count++;\n }\n }\n return count;\n}\n\nfunction firstOverBudget(amounts, budget) {\n let running = 0;\n for (let i = 0; i < amounts.length; i++) {\n if (amounts[i] < 0) {\n continue;\n }\n running += amounts[i];\n if (running > budget) {\n return i;\n }\n }\n return -1;\n}\n\nconsole.log(totalSpent(amounts), countAtLeast(amounts, 500), firstOverBudget(amounts, 2000));\n"},"checks":[{"id":"total","test":"return totalSpent([450, -300, 1220, 270, 899]) === 2839 && totalSpent([]) === 0 && totalSpent([100, 200]) === 300;\n"},{"id":"count","test":"return countAtLeast([450, -300, 1220, 270, 899], 500) === 2 && countAtLeast([500, 499, 501], 500) === 2 && countAtLeast([], 1) === 0;\n"},{"id":"first-over","test":"return firstOverBudget([450, -300, 1220, 270, 899], 2000) === 4 && firstOverBudget([3000], 2000) === 0;\n"},{"id":"never-over","test":"return firstOverBudget([100, 200], 2000) === -1 && firstOverBudget([1000, 1000], 2000) === -1 && firstOverBudget([], 10) === -1;\n"}],"title":"مُرّ على مصاريف Pocket","prompt":"تستلم كل دالة amounts، وهي مصفوفة مبالغ بالسنتات، والأرقام السالبة فيها مبالغ مستردّة. أكمل:
totalSpent(amounts): مجموع كل الإنفاق، مع تخطّي المبالغ المستردّة.countAtLeast(amounts, minimum): عدد المبالغ الأكبر من minimum أو المساوية له.firstOverBudget(amounts, budget): فهرس المصروف الذي يتجاوز عنده مجموع الإنفاق المتراكم budget لأول مرة (مع تخطّي المبالغ المستردّة)، أو -1 إن لم يتجاوزها أبدًا.if (amount < 0) { continue; } تتخطّى المبلغ المستردّ. وفي firstOverBudget تحتاج إلى الموضع، فاستخدم الحلقة العدّادة: for (let i = 0; i < amounts.length; i++).","في firstOverBudget، بمجرّد أن يصبح running > budget، فإن return i; تُنهي الدالة (والحلقة معها). وبعد الحلقة اكتب return -1;."],"explanation":"تشترك الدوال الثلاث في شكل واحد: متغيّر يُهيَّأ قبل الحلقة، ويتغيّر داخلها، ويُرجَع بعدها. وتتيح لك continue تخطّي المبالغ المستردّة دون أن تضع باقي الجسم داخل if أخرى. أما firstOverBudget فتحتاج إلى الموضع، لذلك تستخدم الحلقة العدّادة مع i < amounts.length، وهو نطاق الفهارس الصالحة بالضبط. والإرجاع من داخل الحلقة يوقفها عند أول تطابق، وreturn -1 بعد الحلقة لا تُنفَّذ إلا حين لا يوجد أي تطابق. وإنفاق الميزانية بالضبط ليس تجاوزًا لها، لذلك تُرجع [1000, 1000] مع ميزانية 2000 القيمة -1.
totalSpent تجمع الإنفاق وتتخطّى المبالغ المستردّة","count":"countAtLeast تعدّ المبالغ التي تساوي الحدّ الأدنى أو تزيد عليه","first-over":"firstOverBudget تُرجع الفهرس الذي تُتجاوز عنده الميزانية لأول مرة","never-over":"firstOverBudget تُرجع -1 حين لا تُتجاوز الميزانية أبدًا"}},"words":641,"readMinutes":4}