تعلم البرمجة باستخدام JavaScript


الدرس: استخدم الحلقة الصحيحة لتكرار المهام (for, while)


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

استخدم حلقة for لمعرفة "كم مرة؟"



لنفترض أن لديك 10 ركاب على متن الطائرة ، وفي الوقت الحالي لا تهتم بالترتيب الذي صعدوا إليه. استخدم حلقة  for  لالتقاطهم واحدا تلو الآخر حتى تصل إلى 10:


const numberOfPassengers = 10;

 

for (let i = 0; i < numberOfPassengers; i++) {

 

   console.log("الراكب على متن الطائرة !");

 

}
 
بالنسبة لهذه الحلقة  for  ، قم بإنشاء متغير فهرس  i  يعمل كمقياس لعدد عمليات تنفيذ الحلقة. ولهذا السبب سيبدأ من الصفر ، لأننا لم نمر بالحلقة بعد.

الأمر الثاني بين القوسين    for  هو شرط متابعة الحلقة: بمجرد أن يتم تقييمها    false  ، نخرج من الحلقة. في هذه الحالة ، تريد تشغيله عدة مرات مثل عدد الركاب ، لذلك عندما    يصل المؤشر  i إلى 10 (بعد 10 حلقات) ، أنت تريد إيقافه ، لأنه لا يوجد المزيد من الركاب.

JavaScript
مبدأ حلقة For

يخبر الأمر الثالث الحلقة    for  بالزيادة    i  (إضافة 1) في كل شوط. هذا ما يجعل من الممكن متابعة عدد عمليات التكرار في الحلقة.

تنهي JavaScript الحلقة قبل تنفيذ أي تعليمات برمجية أخرى ، لذلك إذا كنت ستكتب هذا:


const numberOfPassengers = 10;

 

for (let i = 0; i < numberOfPassengers; i++) {

 

   console.log("الراكب على متن الطائرة !");

 

}

 

console.log("كل الركاب على متن الطائرة !");
 
ستتم طباعة آخر إخراج لوحدة التحكم بعد صعود الركاب العشرة.

يعد العمل على الأدلة أمرًا جيدًا ، ولكن ماذا لو أردت استخدام مجموعة من الركاب للصعود على متنها بترتيب معين؟

العمل على المصفوفات:   for… of و for… in



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

كانت الطريقة القديمة للتكرار خلال المصفوفة هي استخدام الحلقة التي تمت    for  مشاهدتها سابقًا بخصائصها    length  . على سبيل المثال ، مع مصفوفة تسمى    passengers  :


for (let i = 0; i < passengers.length; i++) {

 

console.log("Passager embarqué !");



}
 
بينما يعمل هذا ، هناك طريقتان أسهل للتكرار خلال المصفوفات (أو تكرار عناصرها).

الحلقة for… in


الحلقة    for…  in  تشبه إلى حد كبير مثال الحلقة    for  العادية ، لكنها أسهل في القراءة ، وتؤدي كل عمليات التكرار نيابةً عنك:


const passengers = [

 

"Will Alexander",

 

"Sarah Kate'",

 

"Audrey Simon",

 

"Tao Perkington"

 

]

 

for (let i in passengers) {

 

   console.log("وضع الراكب  " + passengers[i]);

 

}
 
كما في المثال السابق ،    i  يبدأ تلقائيًا عند الصفر ويزداد مع كل حلقة. لذلك تقوم بالطباعة    passengers[0]  ، إذن   passengers[1]  ،    passengers[2]  وما إلى ذلك ، حتى تكمل التكرار على جميع الركاب. يمكنك بالطبع طباعة كل عنصر على وحدة التحكم ، حيث أن كل منها عبارة عن سلسلة تحتوي على اسم الراكب.

الحلقة for… of


بالنسبة للحالات التي لا يلزم فيها الفهرس الدقيق لعنصر أثناء التكرار ، يمكنك استخدام حلقة    for… of  :

بالعودة إلى المثال السابق واستخدام حلقة بدلاً من ذلك    for… of  ، تحصل على:


const passengers = [

 

"Will Alexander",

 

"Sarah Kate",

 

"Audrey Simon",

 

"Tao Perkington"

 

]

 

for (let passenger of passengers) {

 

   console.log("مضع الراكب " + passenger);

 

}
 
ينتج عن هذا نفس النتيجة تمامًا ، ولكن بطريقة أكثر قابلية للقراءة ، لأنه لا داعي للقلق بشأن المؤشرات والمصفوفات: فأنت تتلقى كل عنصر بالترتيب. يكون هذا أكثر فائدة إذا كانت المصفوفة أكثر تعقيدًا وتحتوي على سبيل المثال كائنات:

const passengers = [

 

{

 

name: "Will Alexander",

 

ticketNumber: 209542

 

},

 

{

 

name: "Sarah Kate",

 

ticketNumber: 169336

 

},

 

{

 

name: "Audrey Simon",

 

ticketNumber: 779042

 

},

 

{

 

name: "Tao Perkington",

 

ticketNumber: 703911

 

}

 

]

 

for (let passenger of passengers) {

 

   console.log(' وضع الراكب ' + passenger.name + ' برقم التذكرة ' + passenger.ticketNumber);

 

}
 

تدرب على الحلقة FOR

JavaScript
إليك تمرين يستخدم الجداول والحلقات   for  .

انتقل إلى محرر CodePen هذا . تمت إعادة هيكلة مكون الحلقة ، ويتم الآن استيراد الحلقات من قاعدة بيانات.

أنت الآن بحاجة إلى تنفيذ بعض التعليمات البرمجية التي ستعيد تعيين معلومات العرض لجميع الحلقات. ستنجز هذه المهمة عن طريق تكرار المصفوفة    episodes  ، وتعيين خاصية hasBeenWatched   كل حلقة إلى false     .

تم بالفعل الإعلان المصفوفة     episodes  من أجلك.

  1. كرر المصفوفة    episodes  وعيّن خاصية hasBeenWatched  كل حلقة إلى false    ، باستخدام for ، for ... in ، او for… of .
  2. الآن اجعل جميع الحلقات تحسب كما لو انها شوهدت. 
تذكر أن الكود الخاص بك سينتقل بين تعليقات "===" في التمرين.

الحل المقترح



تعمل هذه الأنواع من الحلقات بشكل جيد جدًا لعدد ثابت من التكرارات. لكن لا يمكنك دائمًا معرفة عدد المرات التي يجب إجراء حلقة.

استخدم الحلقةwhile  



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


let seatsLeft = 10;

 

let passengersStillToBoard = 8;

 

let passengersBoarded = 0;

 

while (seatsLeft > 0 && passengersStillToBoard > 0) {

 

passengersBoarded++; // راكب في الطائرة

 

passengersStillToBoard--; // لذلك ينقص عدد الركاب على متن الطائرة

 

seatsLeft--; // ومقعد واحد أقل

 

}

 

console.log(passengersBoarded); // يطبع 8 ، لأن هناك 8 ركاب على 10 مقاعد
 
هذه الحلقة    while  لا تزال تستمر حتى أحد الأرقام    seatsLeft  و    passengersStillToBoard  تصل إلى الصفر، وعند هذه النقطة ينتهي.

باختصار



ناقشت في هذا الفصل طريقتين لتكرار المهام:

  • الحلقة    for  ، لعدد ثابت من التكرارات ؛
  • الحلقة    while  ، عندما يكون عدد التكرارات المطلوبة غير معروف.
في الفصل التالي ، سنلقي نظرة على ما يجب فعله عندما لا تسير الأمور كما هو مخطط لها.