الحلقات التكرارية هي مفهوم أساسي في البرمجة يسمح لك بتكرار تنفيذ مجموعة من التعليمات البرمجية عدة مرات. هذا يوفر الوقت ويقلل من تكرار الكود ويجعل البرامج أكثر كفاءة.
في JavaScript، هناك عدة أنواع من الحلقات التكرارية، ولكل منها استخداماته وحالاته الخاصة.
مفهوم الحلقة التكرارية (Loop Concept):
الفكرة الأساسية للحلقة التكرارية هي أتمتة المهام المتكررة. بدلاً من كتابة نفس الكود مرارًا وتكرارًا، يمكنك استخدام حلقة لتنفيذه بالعدد المطلوب من المرات أو حتى يتحقق شرط معين.
✅ لماذا نستخدم التكرار؟
🟩 الفوائد:
- تقليل التكرار اليدوي للكود.
- تنفيذ عمليات على عناصر متعددة (مثل المصفوفات أو الكائنات).
- إجراء حسابات تلقائية (مثل المجموع، المتوسط…).
- إنشاء واجهات تلقائيًا (كروت منتجات، صفوف جدول…).
✅ أنواع التكرار في JavaScript:
النوع | متى يُستخدم؟ |
---|---|
for | عندما تعرف عدد التكرارات مسبقًا |
while | عندما لا تعرف عدد التكرارات بدقة |
do...while | عندما تريد تنفيذ الكود مرة على الأقل |
for...of | للتكرار على المصفوفات أو النصوص |
for...in | للتكرار على خصائص الكائنات |
حلقة for
:
تُعد حلقة for
من أكثر الحلقات شيوعًا واستخدامًا عندما تعرف مسبقًا عدد المرات التي تريد فيها تكرار الكود.
✅ متى تستخدم for
؟
- عندما تعرف عدد التكرارات مسبقًا.
- عند الحاجة إلى مؤشر عددي (
i
) للوصول إلى رقم أو بناء تسلسل. - في التكرار الثابت كـ “كرّر 10 مرات”، أو “من 1 إلى 100”.
بنية حلقة for
:
for (initialization; condition; finalExpression) {
// الكود الذي سيتم تكراره
}
JavaScriptinitialization
(التهيئة): يتم تنفيذه مرة واحدة فقط قبل بدء الحلقة. عادةً ما يستخدم لتعريف وتهيئة متغير عداد الحلقة (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);
JavaScriptlet 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]);
}
JavaScriptconst 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]);
}
JavaScript3. جمع أرقام داخل مصفوفة:
let numbers = [5, 10, 20];
let total = 0;
for (let i = 0; i < numbers.length; i++) {
total += numbers[i];
}
console.log("المجموع:", total);
JavaScript4. إنشاء مصفوفة جديدة بعد التعديل:
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]
JavaScript5. حذف عناصر فارغة من المصفوفة:
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);
}
JavaScriptlet 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✅ نصائح عند استخدام الحلقات المتداخلة:
- ✅ تأكد من أن كل حلقة لها اسم متغير مختلف (
i
,j
,k
…). - ❗ الحلقات المتداخلة تستهلك الكثير من الأداء إذا كانت كبيرة (Nested Loops = O(n²)).
- ✅ يمكنك استخدام
break
أوcontinue
داخل الحلقة الداخلية فقط أو باستخدامlabel
للخروج من الكل (إن أردت ذلك لاحقًا).