MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

الحلقات والتكرار

This translation is incomplete. Please help translate this article from English.

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

يمكنك التفكير في الحلقة كنسخة من لعبة في الكمبيوتر، حيث ستقوم بتحريك السوبر ماريو X من الخطوات الى الامام، على سبيل المثال، امر التحريك، " تَحرًك ب 5 خطوات إلى الامام". يمكن تطبيق مثل هذه الفكرة باستخدام الحلقة:

var step;
for (step = 0; step < 5; step++) {
  // Runs 5 times, with values of step 0 through 4.
  console.log('Walking east one step');
}

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

الحلقات المتوفرة في جافاسكريبت وهي :

الحلقة for

الحلقة for loop لاتتوقف عن التكرار حتى يتم تحقق الشرط المحدد ب false. الحلقة for لجافاسكريبت مشابه للحلقة for الخاصة ب Java و C. يوضح الشكل التالي التركيبة الاساسية للحلقة for:

for ([initialExpression]; [condition]; [incrementExpression])
  statement

عند تنفيذ الحلقة، يحدث ما يلي:

  1.  initialExpression : التعبير المستخدم لتهيئة الحلقة، سيتم تنفيذه، إذا كان موجوداً. يقوم هذا التعبير بتهيئة عداد حلقة واحدة أو أكثر، من الممكن استخدام تعبيرات أكثر تعقيدا  إذا لزم الأمر. يمكن ايضا أن يتم تعريف المتغيرات في هذا التعبير.
  2. condition : تعبير الشرط الذي تتمحور حوله الحلقة. اذا كانت قيمته تساوي true، ستنفذ الحلقة من جديد، عندما ستصبح قيمته تساوي false، ستنتهي الحلقة، إذا تم حذف تعبير الشرط تماما. سيعتبر الشرط صحيحاً true.
  3. statement : التعليمة البرمجية التي ستنفذ ما دام الشرط يساوي true. لتنفيذ تعليمات برمجية متعددة، استخد التعليمة بلوك ({ ... }).
  4. incrementExpression : تحديث التعبير، إذا كان موجودا، ينفذ، ويعود التحكم إلى الخطوة رقم 2.

مثال

تحتوي الدالة التالية على التعليمة for التي تقوم باحصاء عدد العناصر options المحددة في العنصر <select>. التعليمة for تعلن عن المتغير i وتقوم بتهيئته ب 0. وتتحقق من ان i اصغر من عدد العناصر في العنصر <select>. ستنفذ التعليمة if  بنجاح، وستزيد قيمة i بواحد ما دامت الحلقة مستمرة بالتكرار.

<form name="selectForm">
  <p>
    <label for="musicTypes">Choose some music types, then click the button below:</label>
    <select id="musicTypes" name="musicTypes" multiple="multiple">
      <option selected="selected">R&B</option>
      <option>Jazz</option>
      <option>Blues</option>
      <option>New Age</option>
      <option>Classical</option>
      <option>Opera</option>
    </select>
  </p>
  <p><input id="btn" type="button" value="How many are selected?" /></p>
</form>

<script>
function howMany(selectObject) {
  var numberSelected = 0;
  for (var i = 0; i < selectObject.options.length; i++) {
    if (selectObject.options[i].selected) {
      numberSelected++;
    }
  }
  return numberSelected;
}

var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
  alert('Number of options selected: ' + howMany(document.selectForm.musicTypes));
});
</script>

الحلقة do...while

الحلقة do...while لاتتوقف عن التكرار حتى يتم تحقق الشرط المحدد ب false . يوضح الشكل التالي التركيبة الاساسية للحلقة do...while

do
  statement
while (condition);

statement: تنفذ مرة واحدة قبل أن تبدا عملية التحقق من الشرط. عند البدا بعملية التحقق، اذا كان الشرط (condition) يساوي true، تنفذ التعليمة البرمجية (statement) مرة اخرى. بعد انهاء التنفيذ، يتم التحقق مرة اخرى من الشرط. الى ان يصبح الشرط يساوي false، عندها يتوقف التنفيذ ويتم انتقال التحكم الى التعليمة البرمجية التي تلي do...while. لتنفيذ تعليمات برمجية متعددة، استخدم التعليمة بلوك ({ ... }).

مثال

في المثال التالي، الحلقة do، تنفذ مرة واحدة على الاقل وتستمر بالتكرار حتى يصبح i ليس أقل من 5.

var i = 0;
do {
  i += 1;
  console.log(i);
} while (i < 5);

الحلقة while

الحلقة while ستستمر بتنفيذ التعليمة البرمجية المرتبطة بها طالما الشرط المحدد يساوي true. يوضح الشكل التالي التركيبة الاساسية للحلقة while

while (condition)
  statement

عندما سيصبح الشرط يساوي false، ستتوقف التعليمة البرمجية (statement) المرتبطة بالحلقة  عن التنفيذ وسينتقل التحكم الى التعليمة البرمجية التي تلي الحلقة while.

يتم التحقق من شرط الاختبار قبل تنفيذ statement. كلما عاد الشرط ب true، ستنفذ statement ويتم الرجوع الى الشرط للتحقق منه مرة اخرى. عندما سيعود الشرط ب false سيتوقف التنفيذ وسينتقل التحكم الى التعليمة البرمجية التي تلي الحلقة while.  لتنفيذ تعليمات برمجية متعددة، استخدم التعليمة بلوك ({ ... }).

المثال الاول

الحلقة while ستستمر بالتكرار طالما n أقل من ثلاثة:

var n = 0;
var x = 0;
while (n < 3) {
  n++;
  x += n;
}

مع كل تكرار، ستقوم الحلقة بالزيادات على n وتضيف قيمته إلى x. لذالك  x و n ستمتلك القيم التالية:

  • بعد المرور الأول:    n = 1  و   x = 1
  • بعد المرور الثاني:  n = 2  و   x = 3
  • بعد المرور الثالث:  n = 3  و   x = 6

بعد الانتهاء من المرور الثالث، الشرط ( n < 3 ) لم يعد يساوي true، لذالك ستنتهي الحلقة.

المثال الثاني

لتجنب تكرار الحلقة الى ما لا نهاية. تأكد من أن الشرط في الحلقة، سيصبح في نهاية المطاف ب false، التعليمة البرمجية في الحلقة while التالية، لن تتوقف عن التنفيذ بسبب ان الشرط لن يصبح ب false:

while (true) {
  console.log('Hello, world!');
}

تحذير: استمرار تكرار الحلقة الى ما لا نهاية سيتسبب في توقف المتصفحات عن العمل.

التعليمة label

تستخدم التعليمة label  لتوفير معرف (id) للتعليمة البرمجية المراد الرجوع اليها من موقع آخر في البرنامج. على سبيل المثال، يمكنك استخدام label لتحديد حلقة، ثم استخدام التعليمة break او continue للإشارة إلى ما إذا كان البرنامج ينبغي أن يوقف الحلقة أو الاستمرار في تنفيذها.

التعبير الخاص بالتعليمة  label يشبه ما يلي:

label :
   statement

قيمة label  يمكن ان تكون أي معرف جافاسكريبت باستثناء الكلمات المحجوزة. التعليمة البرمجية (statement) التي سيشار اليها من طرف label يمكن ان تكون اي تعليمة برمجية.

مثال

في هذا المثال، label markLoop يعرف الحلقة while.

markLoop:
while (theMark == true) {
   doSomething();
}

ملاحظة: لمزيد من التفاصيل حول التعليمة label، راجع صفحة مرجع الجافا سكريبت

التعليمة break

تستخدم التعليمة break لانهاء الحلقة، او switch، أو بالتزامن مع االتعليمة label.

  • عند استخدام break من دون label ستقوم بانهاء الحلقة  (while ،do-while ،for او switch). وانتقال التحكم الى التعليمة البرمجية التالية.
  • عند استخدام break مع label سيتم انهاء تنفيذ التعليمة البرمجية المحددة من طرف label

يمكن التعبير عن  التعليمة break من خلال طريقتين:

break;
break label;

تستخدم الطريقة الأولى لانهاء الحلقة المتواجدة بها، او لانهاء switch. الطريقة الثانية لانهاء تنفيذ التعليمات التي تم تحديدها من قبل label.

المثال الاول

يقوم المثال التالي بالتكرار على عناصر المصفوفة، وبمجرد الوصول الى العنصر المحدد في الشرط وهو theValue سيتم انهاء الحلقة،

for (var i = 0; i < a.length; i++) {
  if (a[i] == theValue) {
    break;
  }
}

المثال الثاني

المثال التالي، يبين كيفية استخدام التعليمة break بكلا الطريقتين:

var x = 0;
var z = 0;
labelCancelLoops: while (true) {
  console.log('Outer loops: ' + x);
  x += 1;
  z = 1;
  while (true) {
    console.log('Inner loops: ' + z);
    z += 1;
    if (z === 10 && x === 10) {
      break labelCancelLoops;
    } else if (z === 10) {
      break;
    }
  }
}

التعليمة continue

يمكن استخدام التعليمة continue لاستئناف الحلقة while) do-while ،for ، مع labe)، بعد توقفها لغرض معين.

  • عند استخدام continue من دون label، ستقوم بانهاء التكرار الحالي للحلقة while) do-while، او for) وتنتقل الى التكرار التالي. على النقيض من التعليمة break، التعليمة continue لا تنهي تنفيذ الحلقة تماما. عند استخدامها مع الحلقة while فحلقة البرنامج ستعود إلى الشرط. وعند استخدامها مع الحلقة for فحلقة البرنامج ستعود إلى تعليمة الزيادة (increment-expression)
  • عند استخدام continue مع label، سيتم تطبيقها على الحلقة المحددة بواسطة label.

يمكن التعبير عن  التعليمة continue من خلال طريقتين:

continue;
continue label;

المثال الاول

في المثال التالي، لدينا الحلقة while مع التعليمة continue التي ستنفذ حينما تصبح i تساوي 3. ولدينا n الذي سيحتوي على القيم التالية:  1, 3, 7 و 12.

var i = 0;
var n = 0;
while (i < 5) {
  i++;
  if (i == 3) {
    continue;
  }
  n += i;
}

المثال الثاني

التعليمة label checkiandj تحتوي على التعليمة label checkj. عند مصادفة continue سيقوم البرنامج بانهاء التكرار الحالي ل checkj ويبدأ التكرار من جديد. وفي كل مرة يتم مصادفة continue، تستمر checkj بالتكرار حتى يعود الشرط ب false. عندما سيتم العودة ب false،  ما تبقى من التعليمة checkiandj سيكتمل، و checkiandj ستستمر بالتكرار حتى يعود الشرط ب false. عندما سيتم العودة ب false، سينتقل البرنامج الى التعليمة البرمجية التي تلي checkiandj.

checkiandj:
  while (i < 4) {
    console.log(i);
    i += 1;
    checkj:
      while (j > 4) {
        console.log(j);
        j -= 1;
        if ((j % 2) == 0) {
          continue checkj;
        }
        console.log(j + ' is odd.');
      }
      console.log('i = ' + i);
      console.log('j = ' + j);
  }

عموما: التعليمة break تقوم بانهاء الحلقة نهائيا عندما يتم تحقق الشرط المحدد، فيما تقوم التعليمة continue بتوقيف الحلقة للتحقق من الشرط المحدد، وعندما يتم تنفيذ الشرط، يتم استئناف الحلقة.

التعليمة for...in

تستخدم الحلقة for...in للتكرار على جميع خصائص الكائن القابلة للاحصاء enumerable properties.  مقابل كل خاصية مميزة، ستنفذ الجافا سكريبت تعليمات برمجية محددة. يوضح الشكل التالي التركيبة الاساسية للحلقة for...in

for (variable in object) {
  statements
}

مثال

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

function dump_props(obj, obj_name) {
  var result = '';
  for (var i in obj) {
    result += obj_name + '.' + i + ' = ' + obj[i] + '<br>';
  }
  result += '<hr>';
  return result;
}

بالنسبة للكائن car مع الخصائص make و model، الناتج سيكون على الشكل التالي:

car.make = Ford
car.model = Mustang

for...in و المصفوفات

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

var myArray = [0, 1, 2, , , 5];
myArray.foo = "hello";

for (var i in myArray) { 
  	console.log(i);  // Outputs 0, 1, 2, 5, hello.
}

for (var i = 0; i < myArray.length; ++i) {
  	console.log(i);  // Outputs 0, 1, 2, 3, 4, 5
}

الحلقة for...of

التعليمة for...of نوع جديد من الحلقات تم إضافتها الى الإصدار السادس  من جافا سكربت ، وتستخدم للتكرار على العناصر الموجودة في أي مجموعة أو iterable objects (مثل ArrayMap, Set والكائن arguments الخ.), كما أن هذا الأسلوب يمكننا من تنفيذ تعليمة برمجية معينة على كل عنصر تم جلبه على حدة للتعديل على أي من خصائصه. يوضح الشكل التالي التركيبة الاساسية للحلقة for...of

for (variable of object) {
  statement
}

المثال التالي، يوضح الفرق بين الحلقة for...of والحلقة  for...in الحلقة for...in تقوم بارجاع اسماء الخصائص فيما الحلقة for...of تقوم بارجاع قيم الخصائص:

let arr = [3, 5, 7];
arr.foo = 'hello';

for (let i in arr) {
   console.log(i); // logs "0", "1", "2", "foo"
}

for (let i of arr) {
   console.log(i); // logs 3, 5, 7
}

Document Tags and Contributors

 Contributors to this page: Youssef-Belmeskine
 Last updated by: Youssef-Belmeskine,