الحلقات في لغة JavaScript

الحلقات في لغة JavaScript

يا هلا بالجميع! اليوم بنشوف كيف الحلقات (Loops) بتساعدنا نكرر الكود في جافاسكريبت. الموضوع بسيط ومهم مرة عشان نختصر الشغل ونخلي الكود حقنا أنظف.

حلقة for

هذي أشهر حلقة وأكثرها استخدامًا. تستخدمها لما تكون عارف عدد مرات التكرار.

الشكل العام حقها كذا:

for (initialization; condition; increment/decrement) {
  // الكود اللي بيتكرر هنا
}

مثال سريع:

for (let i = 0; i < 5; i++) {
  console.log('الرقم:', i);
}

هنا، let i = 0 نبدأ العداد من صفر. i < 5 الشرط اللي يخلي الحلقة تستمر، يعني لين يصير i أقل من 5. وكل مرة تخلص فيها لفة، i++ بتزيد قيمة i بواحد.

ملاحظة: انتبه لا تسوي حلقة لا نهائية (Infinite Loop) بالغلط، بتعلق المتصفح أو البرنامج حقك!

حلقة while

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

شكلها كذا:

while (condition) {
  // الكود اللي بيتكرر
  // لازم يكون فيه شي يغير الـ condition عشان الحلقة توقف
}

مثال:

let count = 0;
while (count < 3) {
  console.log('العد وصل:', count);
  count++;
}

هنا، الحلقة بتستمر طالما count أقل من 3. كل لفة بنطبع القيمة ونزيد count.

حلقة do...while

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

شكلها كذا:

do {
  // الكود اللي بيتنفذ مرة وحدة على الأقل
} while (condition);

مثال:

let num = 0;
do {
  console.log('الرقم الحالي:', num);
  num++;
} while (num < 0); // الشرط هنا false، لكن الكود بيتنفذ مرة

في المثال هذا، num بتبدأ بصفر. الكود داخل do بيتنفذ، بتطبع الرقم الحالي: 0. بعدين بيتشيك على الشرط num < 0، وهذا false لأن num صارت 1. فالحلقة توقف بعد لفة وحدة.

حلقة for...in

هذي تستخدمها عشان تمر على خصائص الكائنات (Objects) في JavaScript.

شكلها:

for (let key in object) {
  // هنا الـ key بيكون اسم الخاصية
  // object[key] بيعطيك قيمة الخاصية
}

مثال:

const person = {
  name: 'أحمد',
  age: 30,
  city: 'الرياض'
};

for (let prop in person) {
  console.log(prop + ': ' + person[prop]);
}
// الناتج:
// name: أحمد
// age: 30
// city: الرياض

ملاحظة: for...in بتجيب لك حتى الخصائص اللي جاية من الـ prototype chain. عشان تتجنبها، استخدم hasOwnProperty.

حلقة for...of

هذي جديدة شوي (من ES6) وممتازة للتكرار على الكائنات القابلة للتكرار (Iterable objects) زي المصفوفات (Arrays)، السلاسل النصية (Strings)، الخرائط (Maps)، والمجموعات (Sets).

شكلها:

for (let value of iterable) {
  // هنا الـ value بيكون العنصر نفسه
}

مثال على مصفوفة:

const colors = ['أحمر', 'أخضر', 'أزرق'];
for (let color of colors) {
  console.log(color);
}
// الناتج:
// أحمر
// أخضر
// أزرق

ومثال على نص:

const greeting = 'سلام';
for (let char of greeting) {
  console.log(char);
}
// الناتج:
// س
// ل
// ا
// م

دالة forEach (للمصفوفات)

هذي مو حلقة بالمعنى التقليدي، بس هي دالة مصفوفة (Array method) وتستخدم للتكرار على عناصر المصفوفة بطريقة حلوة ونظيفة.

شكلها:

array.forEach(function(item, index, array) {
  // الكود اللي بيتنفذ لكل عنصر
  // item: العنصر الحالي
  // index: الفهرس (اختياري)
  // array: المصفوفة الأصلية (اختياري)
});

مثال:

const fruits = ['تفاح', 'برتقال', 'موز'];
fruits.forEach(function(fruit, index) {
  console.log('الفاكهة رقم ' + (index + 1) + ': ' + fruit);
});
// الناتج:
// الفاكهة رقم 1: تفاح
// الفاكهة رقم 2: برتقال
// الفاكهة رقم 3: موز

ملاحظة: forEach ما تقدر تسوي فيها break أو continue زي الحلقات العادية. لو احتجت تسوي كذا، استخدم for أو for...of.

متى تستخدم أي حلقة؟

باختصار، الموضوع يعتمد على السيناريو:

• for: إذا كنت عارف عدد مرات التكرار.
• while: إذا كنت تحتاج تكرر الكود طالما فيه شرط معين صحيح.
• do...while: نفس while بس تضمن تنفيذ الكود مرة وحدة على الأقل.
• for...in: للتكرار على خصائص الكائنات (Objects).
• for...of: للتكرار على عناصر المصفوفات، السلاسل النصية، وغيرها من الكائنات القابلة للتكرار.
• forEach: للمصفوفات لما تبغى تنفذ دالة لكل عنصر بدون ما تحتاج تتحكم في الـ index أو توقف الحلقة.

الخلاصة

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

← السابقالفهرسالتالي →