Loops In JavaScript

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

في JavaScript، هناك عدة أنواع من الحلقات التكرارية، ولكل منها استخداماته وحالاته الخاصة.

مفهوم الحلقة التكرارية (Loop Concept):

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

✅ لماذا نستخدم التكرار؟
🟩 الفوائد:
  1. تقليل التكرار اليدوي للكود.
  2. تنفيذ عمليات على عناصر متعددة (مثل المصفوفات أو الكائنات).
  3. إجراء حسابات تلقائية (مثل المجموع، المتوسط…).
  4. إنشاء واجهات تلقائيًا (كروت منتجات، صفوف جدول…).

✅ أنواع التكرار في JavaScript:

النوعمتى يُستخدم؟
forعندما تعرف عدد التكرارات مسبقًا
whileعندما لا تعرف عدد التكرارات بدقة
do...whileعندما تريد تنفيذ الكود مرة على الأقل
for...ofللتكرار على المصفوفات أو النصوص
for...inللتكرار على خصائص الكائنات

حلقة for:

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

✅ متى تستخدم for؟
  • عندما تعرف عدد التكرارات مسبقًا.
  • عند الحاجة إلى مؤشر عددي (i) للوصول إلى رقم أو بناء تسلسل.
  • في التكرار الثابت كـ “كرّر 10 مرات”، أو “من 1 إلى 100”.

بنية حلقة for:

for (initialization; condition; finalExpression) {
  // الكود الذي سيتم تكراره
}
JavaScript

initialization (التهيئة): يتم تنفيذه مرة واحدة فقط قبل بدء الحلقة. عادةً ما يستخدم لتعريف وتهيئة متغير عداد الحلقة (e.g., let i = 0)

condition (الشرط): يتم تقييم هذا الشرط قبل كل تكرار. إذا كان الشرط true، يتم تنفيذ الكود داخل الحلقة. إذا أصبح false، تتوقف الحلقة.

finalExpression (التعبير النهائي): يتم تنفيذه في نهاية كل تكرار.

عادةً ما يستخدم لتحديث قيمة عداد الحلقة (e.g., i++ لزيادته أو i-- لإنقاصه).

// طباعة الأرقام من 0 إلى 4
for (let i = 0; i < 5; i++) {
  console.log(`الرقم هو: ${i}`);
}

// العد التنازلي
for (let count = 3; count > 0; count--) {
  console.log(`العد التنازلي: ${count}`);
}
JavaScript

مثال2 :

let sum = 0;
for (let i = 1; i <= 100; i++) {
  sum += i;
}
console.log("المجموع:", sum);
JavaScript
let totalVisitors = 5;

for (let i = 1; i <= totalVisitors; i++) {
  console.log(`مرحبًا بالزائر رقم ${i}`);
}
JavaScript

التكرار على التسلسلات (Looping On Sequences):

يمكنك استخدام الحلقات للتكرار على عناصر التسلسلات مثل المصفوفات (Arrays) والسلاسل النصية (Strings).

1. التكرار على المصفوفات (Arrays):

  • باستخدام حلقة for التقليدية (مع الفهرس):

الصيغة الأساسية:

let array = ["عنصر1", "عنصر2", "عنصر3"];

for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}
JavaScript
const fruits = ["تفاحة", "موزة", "برتقالة", "مانجو"];
for (let i = 0; i < fruits.length; i++) {
  console.log(`الفاكهة في الفهرس ${i} هي: ${fruits[i]}`);
}
///////////////////////////////////////////////
let colors = ['red', 'green', 'blue'];
for (let i = 0; i < colors.length; i++) {
  console.log(colors[i]);
}
JavaScript
3. جمع أرقام داخل مصفوفة:
let numbers = [5, 10, 20];
let total = 0;

for (let i = 0; i < numbers.length; i++) {
  total += numbers[i];
}

console.log("المجموع:", total);
JavaScript
4. إنشاء مصفوفة جديدة بعد التعديل:
let original = [1, 2, 3];
let doubled = [];

for (let i = 0; i < original.length; i++) {
  doubled.push(original[i] * 2);
}

console.log(doubled);  // [2, 4, 6]
JavaScript
5. حذف عناصر فارغة من المصفوفة:
let items = ["منتج", "", "عرض", "", "خصم"];
let clean = [];

for (let i = 0; i < items.length; i++) {
  if (items[i] !== "") {
    clean.push(items[i]);
  }
}

console.log(clean);  // ["منتج", "عرض", "خصم"]
JavaScript

مثال: استخراج الأرقام فقط من مصفوفة مختلطة

let mixedArray = [10, "نص", true, 25, "مرحبا", false, 7, null, "100"];

for (let i = 0; i < mixedArray.length; i++) {
  if (typeof mixedArray[i] === "number") {
    console.log("رقم:", mixedArray[i]);
  }
}
JavaScript
✅ شرح الكود:
  • نستخدم typeof mixedArray[i] === "number" لفحص نوع العنصر.
  • نطبع فقط العناصر التي نوعها number.
  • نتجاهل النصوص (string) والقيم المنطقية (boolean) والقيم الأخرى مثل null.

ملاحظة إضافية:

لو أردت تخزين الأرقام فقط في مصفوفة جديدة:

let numbersOnly = [];

for (let i = 0; i < mixedArray.length; i++) {
  if (typeof mixedArray[i] === "number") {
    numbersOnly.push(mixedArray[i]);
  }
}

console.log(numbersOnly); // [10, 25, 7]
JavaScript

التكرار على السلاسل النصية (Strings):

السلاسل النصية هي أيضًا كائنات قابلة للتكرار.

  • باستخدام حلقة for التقليدية (مع الفهرس):
const message = "مرحباً";
for (let i = 0; i < message.length; i++) {
  console.log(`الحرف في الفهرس ${i} هو: ${message[i]}`);
}
JavaScript
✅ أولًا: break
◀️ التعريف:

يُستخدم break لإيقاف الحلقة نهائيًا والخروج منها عند تحقق شرط معين.

✅ الفائدة:

توفير الوقت والموارد عند الوصول للعنصر المطلوب، دون إكمال باقي التكرارات.

📌 مثال 1: إيقاف البحث عند العثور على العنصر
let users = ["محمد", "سارة", "أحمد", "علي"];

for (let i = 0; i < users.length; i++) {
  if (users[i] === "أحمد") {
    console.log("تم العثور على أحمد في index:", i);
    break;
  }
}
JavaScript

📌 مثال 2: التوقف عند الوصول إلى رقم معين

for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    console.log("توقفنا عند الرقم", i);
    break;
  }
  console.log(i);
}
// يطبع: 1 2 3 4 ثم "توقفنا عند الرقم 5"
JavaScript
✅ ثانيًا: continue
◀️ التعريف:

يُستخدم continue لتجاوز تكرار معين من الحلقة والانتقال مباشرة للتكرار التالي.

✅ الفائدة:

تجاوز عناصر غير مهمة أو غير مطلوبة دون الخروج من الحلقة.

📌 مثال 1: تجاوز العناصر الفارغة
let items = ["تفاح", "", "موز", "", "عنب"];

for (let i = 0; i < items.length; i++) {
  if (items[i] === "") {
    continue;
  }
  console.log(items[i]);
}
// يطبع فقط العناصر غير الفارغة
JavaScript

📌 مثال 2: طباعة الأعداد الفردية فقط

for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {
    continue; // تجاوز الأعداد الزوجية
  }
  console.log(i);
}
// يطبع: 1 3 5 7 9
JavaScript

📌 مثال 3: تخطي الأسماء المحظورة

let names = ["admin", "سارة", "root", "أحمد"];

for (let i = 0; i < names.length; i++) {
  if (names[i] === "admin" || names[i] === "root") {
    continue;
  }
  console.log("اسم مسموح:", names[i]);
}
JavaScript
✅ خلاصة الفرق:
الأمرماذا يفعل؟متى تستخدمه؟
breakيوقف الحلقة تمامًاعند العثور على ما تبحث عنه
continueيتجاوز تكرارًا معينًا فقطلتخطي عناصر غير مطلوبة واستكمال الباقي

الحلقات المتداخلة والتدريبات (Nested Loops And Trainings):

الحلقات المتداخلة (Nested Loops):

✅ أولاً: ما معنى الحلقات المتداخلة (Nested Loops)؟

هي عندما تقوم بوضع حلقة for داخل حلقة for أخرى.

  • الحلقة الخارجية تتحكم في “الدورات الكبرى”.
  • الحلقة الداخلية تتكرر في كل مرة تتكرر فيها الحلقة الخارجية

هي حلقة داخل حلقة أخرى.

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

بنية الحلقات المتداخلة:

for (let i = 0; i < X; i++) {
  for (let j = 0; j < Y; j++) {
    // كود يتكرر داخليًا
  }
}
JavaScript

أمثلة وتدريبات:

  • طباعة جدول الضرب:
for (let i = 1; i <= 5; i++) {
  for (let j = 1; j <= 5; j++) {
    console.log(`${i} × ${j} = ${i * j}`);
  }
  console.log("------------");
}
JavaScript
  • رسم نمط (مثل مستطيل من النجوم):
let rows = 3;
let cols = 5;

for (let i = 1; i <= rows; i++) {
  let line = "";
  for (let j = 1; j <= cols; j++) {
    line += "⭐ ";
  }
  console.log(line);
}
JavaScript
let meals = ["بيتزا", "برجر", "مكرونة"];
let drinks = ["عصير", "ماء", "صودا"];

for (let i = 0; i < meals.length; i++) {
  for (let j = 0; j < drinks.length; j++) {
    console.log(`طلب: ${meals[i]} + ${drinks[j]}`);
  }
}
JavaScript

✅ مثال 4: طباعة أزواج طلاب لكل فريق

let students = ["أحمد", "سارة", "ليلى"];

for (let i = 0; i < students.length; i++) {
  for (let j = 0; j < students.length; j++) {
    if (i !== j) {
      console.log(`${students[i]} × ${students[j]}`);
    }
  }
}
JavaScript
✅ نصائح عند استخدام الحلقات المتداخلة:
  1. ✅ تأكد من أن كل حلقة لها اسم متغير مختلف (i, j, k…).
  2. ❗ الحلقات المتداخلة تستهلك الكثير من الأداء إذا كانت كبيرة (Nested Loops = O(n²)).
  3. ✅ يمكنك استخدام break أو continue داخل الحلقة الداخلية فقط أو باستخدام label للخروج من الكل (إن أردت ذلك لاحقًا).