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

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

مقدمة

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

for

const list = ['a', 'b', 'c']
for (let i = 0; i < list.length; i++) {
  console.log(list[i]) //value
  console.log(i) //index
}
  • يمكنك مقاطعة أforحلقة باستخدامbreak
  • يمكنك التقديم سريعًا إلى التكرار التالي لملفforحلقة باستخدامcontinue

لكل

قدم في ES5. بالنظر إلى مصفوفة ، يمكنك تكرار خصائصها باستخدامlist.forEach():

const list = ['a', 'b', 'c']
list.forEach((item, index) => {
  console.log(item) //value
  console.log(index) //index
})

//index is optional list.forEach(item => console.log(item))

للأسف لا يمكنك الخروج من هذه الحلقة.

do...while

const list = ['a', 'b', 'c']
let i = 0
do {
  console.log(list[i]) //value
  console.log(i) //index
  i = i + 1
} while (i < list.length)

يمكنك مقاطعة أwhileحلقة باستخدامbreak:

do {
  if (something) break
} while (true)

ويمكنك الانتقال إلى التكرار التالي باستخدامcontinue:

do {
  if (something) continue

//do something else } while (true)

while

const list = ['a', 'b', 'c']
let i = 0
while (i < list.length) {
  console.log(list[i]) //value
  console.log(i) //index
  i = i + 1
}

يمكنك مقاطعة أwhileحلقة باستخدامbreak:

while (true) {
  if (something) break
}

ويمكنك الانتقال إلى التكرار التالي باستخدامcontinue:

while (true) {
  if (something) continue

//do something else }

الفرق معdo...whileهل هذاdo...whileدائمًا ما ينفذ دورته مرة واحدة على الأقل.

for...in

يكرر كل الخصائص القابلة للعد لكائن ، مع إعطاء أسماء الخصائص.

for (let property in object) {
  console.log(property) //property name
  console.log(object[property]) //property value
}

for...of

ES6قدم الfor...ofالحلقة التي تجمع بين إيجاز forEach والقدرة على الانكسار:

//iterate over the value
for (const value of ['a', 'b', 'c']) {
  console.log(value) //value
}

//get the index as well, using entries() for (const [index, value] of [‘a’, ‘b’, ‘c’].entries()) { console.log(index) //index console.log(value) //value }

لاحظ استخدامconst. تنشئ هذه الحلقة نطاقًا جديدًا في كل تكرار ، لذا يمكننا استخدامه بأمان بدلاً منlet.

for...inضدfor...of

الفرق معfor...inيكون:

  • for...of يتكرر على قيم الممتلكات
  • for...in يكرر أسماء الخصائص

المزيد من دروس js: