الحلقات في JavaScript — دليل شامل for و while 2026

في المقال السابق، تعلمت الشروط وكيف تجعل البرنامج يتخذ قرارات. لكن ماذا لو أردت تنفيذ نفس الكود **عدة مرات**؟ هنا تأتي **الحلقات (Loops)**. في هذا الدليل العملي، سنأخذك خطوة بخطوة لفهم جميع أنواع الحلقات في JavaScript — من `for` البسيطة إلى `for...of` و `for...in`، مع تمارين وحلول. ## ما هي الحلقات؟ الحلقة هي طريقة لتكرار تنفيذ كود معين **عدة مرات** دون كتابته يدوياً. **مثال من الحياة اليومية:** - **طباعة الأرقام من 1 إلى 100.** - **قراءة كل عنصر في قائمة.** - **تكرار سؤال حتى يحصل المستخدم على الإجابة الصحيحة.** بدون الحلقات، سنضطر لكتابة: ```javascript console.log(1); console.log(2); console.log(3); console.log(4); console.log(5); // ... حتى 100 ``` مع الحلقات: ```javascript for (let i = 1; i <= 100; i++) { console.log(i); } ``` **الفرق واضح:** 3 أسطر بدلاً من 100! ## لماذا نحتاج الحلقات؟ - **توفير الوقت:** اكتب الكود مرة واحدة، ونفّذه آلاف المرات. - **تقليل الأخطاء:** لا تكرر الكود يدوياً. - **التعامل مع البيانات:** مرر على قوائم ومصفوفات. - **المرونة:** عدد التكرارات يمكن أن يكون ديناميكياً. ## أنواع الحلقات في JavaScript هناك **5 أنواع** من الحلقات في JavaScript: <table> <thead> <tr> <th>النوع</th> <th>الاستخدام</th> </tr> </thead> <tbody> <tr> <td><code>for</code></td> <td>عندما تعرف عدد التكرارات</td> </tr> <tr> <td><code>while</code></td> <td>عندما لا تعرف عدد التكرارات</td> </tr> <tr> <td><code>do...while</code></td> <td>مثل while لكن ينفذ مرة على الأقل</td> </tr> <tr> <td><code>for...of</code></td> <td>المرور على قيم مصفوفة</td> </tr> <tr> <td><code>for...in</code></td> <td>المرور على خصائص كائن</td> </tr> </tbody> </table> ## الحلقة for — الأكثر استخداماً الصيغة الأساسية: ```javascript for (التهيئة; الشرط; الزيادة) { // الكود المتكرر } ``` **مثال:** ```javascript for (let i = 1; i <= 5; i++) { console.log("الرقم: " + i); } ``` **النتيجة:** ```bash الرقم: 1 الرقم: 2 الرقم: 3 الرقم: 4 الرقم: 5 ``` **شرح الأجزاء الثلاثة:** 1. **`let i = 1`:** التهيئة (تنفذ مرة واحدة قبل الحلقة). 2. **`i <= 5`:** الشرط (يُفحص قبل كل تكرار). 3. **`i++`:** الزيادة (تنفذ بعد كل تكرار). ### تتبع خطوة بخطوة: | التكرار | قيمة i | هل i <= 5؟ | ينفذ؟ | بعد i++ | |---------|---------|-------------|--------|----------| | 1 | 1 | ✅ | نعم | 2 | | 2 | 2 | ✅ | نعم | 3 | | 3 | 3 | ✅ | نعم | 4 | | 4 | 4 | ✅ | نعم | 5 | | 5 | 5 | ✅ | نعم | 6 | | 6 | 6 | ❌ | توقف | — | ### العد التنازلي: ```javascript for (let i = 5; i >= 1; i--) { console.log("الرقم: " + i); } ``` **النتيجة:** ```bash الرقم: 5 الرقم: 4 الرقم: 3 الرقم: 2 الرقم: 1 ``` ### الزيادة بأكثر من 1: ```javascript for (let i = 0; i <= 10; i += 2) { console.log(i); } ``` **النتيجة:** ```bash 0 2 4 6 8 10 ``` ## الحلقة while — عندما لا تعرف العدد الصيغة: ```javascript while (الشرط) { // الكود المتكرر } ``` **مثال:** ```javascript let i = 1; while (i <= 5) { console.log("الرقم: " + i); i++; } ``` **النتيجة:** نفس نتيجة `for` السابقة. **⚠️ تحذير:** إذا نسيت `i++`، ستدخل في **حلقة لا نهائية** (infinite loop)! ### متى تستخدم while بدلاً من for؟ - عندما لا تعرف عدد التكرارات مسبقاً. - عندما يعتمد التوقف على شرط خارجي. **مثال:** ```javascript let password = ""; // (مثال نظري — في المتصفح استخدم prompt) while (password !== "secret") { // اسأل المستخدم عن كلمة المرور // password = prompt("أدخل كلمة المرور:"); } ``` ## الحلقة do...while — تنفيذ مرة على الأقل الصيغة: ```javascript do { // الكود المتكرر } while (الشرط); ``` **الفرق عن while:** الكود ينفذ **مرة واحدة على الأقل** قبل فحص الشرط. **مثال:** ```javascript let i = 10; do { console.log("الرقم: " + i); i++; } while (i <= 5); ``` **النتيجة:** ```bash الرقم: 10 ``` **لاحظ:** رغم أن الشرط `i <= 5` غير صحيح من البداية، إلا أن الكود نُفّذ مرة واحدة. ## الحلقة for...of — المرور على المصفوفات الصيغة: ```javascript for (const element of array) { // استخدم element } ``` **مثال:** ```javascript const fruits = ["تفاح", "موز", "برتقال"]; for (const fruit of fruits) { console.log(fruit); } ``` **النتيجة:** ```bash تفاح موز برتقال ``` **ميزتها:** أنظف وأسهل من `for` التقليدية عند المرور على مصفوفة. ### مثال آخر: حساب مجموع أرقام ```javascript const numbers = [10, 20, 30, 40, 50]; let sum = 0; for (const num of numbers) { sum += num; } console.log("المجموع: " + sum); // 150 ``` ## الحلقة for...in — المرور على خصائص الكائن الصيغة: ```javascript for (const key in object) { // استخدم key و object[key] } ``` **مثال:** ```javascript const person = { name: "أحمد", age: 25, city: "عمان", }; for (const key in person) { console.log(key + ": " + person[key]); } ``` **النتيجة:** ```bash name: أحمد age: 25 city: عمان ``` **⚠️ تحذير:** `for...in` مخصصة للكائنات، وليست للمصفوفات. استخدم `for...of` للمصفوفات. ## التحكم في الحلقة: break و continue ### break — الخروج من الحلقة ```javascript for (let i = 1; i <= 10; i++) { if (i === 5) { break; // توقف عند 5 } console.log(i); } ``` **النتيجة:** ```bash 1 2 3 4 ``` ### continue — تخطي التكرار الحالي ```javascript for (let i = 1; i <= 5; i++) { if (i === 3) { continue; // تخطى 3 } console.log(i); } ``` **النتيجة:** ```bash 1 2 4 5 ``` **الفرق:** - **`break`:** يخرج من الحلقة تماماً. - **`continue`:** يتخطى التكرار الحالي، ويكمل الباقي. ## الحلقات المتداخلة (Nested Loops) يمكنك وضع حلقة داخل حلقة: ```javascript for (let i = 1; i <= 3; i++) { for (let j = 1; j <= 3; j++) { console.log(`i=${i}, j=${j}`); } } ``` **النتيجة:** ```bash i=1, j=1 i=1, j=2 i=1, j=3 i=2, j=1 i=2, j=2 i=2, j=3 i=3, j=1 i=3, j=2 i=3, j=3 ``` **الاستخدام:** طباعة جداول، معالجة مصفوفات ثنائية الأبعاد. **⚠️ تحذير:** الحلقات المتداخلة تستهلك أداءً. استخدمها فقط عند الحاجة. ## الحلقات اللانهائية — تجنبها! **الحلقة اللانهائية** هي حلقة لا تتوقف أبداً. تحدث عندما يكون الشرط دائماً `true`. ```javascript // ⚠️ لا تجرب هذا! while (true) { console.log("لن تتوقف!"); } ``` **أسبابها الشائعة:** 1. **نسيان `i++`:** ```javascript let i = 1; while (i <= 5) { console.log(i); // ❌ نسيت i++ } ``` 2. **شرط خاطئ:** ```javascript for (let i = 1; i >= 1; i++) { // i دائماً >= 1، لن تتوقف } ``` **الحل:** تأكد دائماً من أن الشرط سيتحول إلى `false` في النهاية. ## تمارين عملية ### تمرين 1: طباعة الأرقام من 1 إلى 10 **الحل:** ```javascript for (let i = 1; i <= 10; i++) { console.log(i); } ``` ### تمرين 2: مجموع الأرقام من 1 إلى 100 **الحل:** ```javascript let sum = 0; for (let i = 1; i <= 100; i++) { sum += i; } console.log("المجموع: " + sum); // 5050 ``` ### تمرين 3: طباعة الأرقام الزوجية اطبع الأرقام الزوجية من 1 إلى 20. **الحل:** ```javascript for (let i = 2; i <= 20; i += 2) { console.log(i); } ``` **أو:** ```javascript for (let i = 1; i <= 20; i++) { if (i % 2 === 0) { console.log(i); } } ``` ### تمرين 4: جدول الضرب اطبع جدول ضرب الرقم 7. **الحل:** ```javascript const num = 7; for (let i = 1; i <= 10; i++) { console.log(`${num} × ${i} = ${num * i}`); } ``` **النتيجة:** ```bash 7 × 1 = 7 7 × 2 = 14 7 × 3 = 21 ... 7 × 10 = 70 ``` ### تمرين 5: عكس مصفوفة اعكس مصفوفة واطبعها. **الحل:** ```javascript const arr = [1, 2, 3, 4, 5]; const reversed = []; for (let i = arr.length - 1; i >= 0; i--) { reversed.push(arr[i]); } console.log(reversed); // [5, 4, 3, 2, 1] ``` ### تمرين 6: البحث عن عنصر ابحث عن الرقم 7 في مصفوفة. **الحل:** ```javascript const numbers = [3, 8, 1, 7, 5, 9]; let found = false; for (const num of numbers) { if (num === 7) { found = true; break; } } console.log(found ? "تم العثور على 7" : "لم يتم العثور"); ``` ### تمرين 7: طباعة نمط المثلث اطبع: ``` * ** *** **** ***** ``` **الحل:** ```javascript for (let i = 1; i <= 5; i++) { let row = ""; for (let j = 1; j <= i; j++) { row += "*"; } console.log(row); } ``` ### تمرين 8: مضروب الرقم (Factorial) احسب مضروب الرقم 5 (5! = 5 × 4 × 3 × 2 × 1). **الحل:** ```javascript let factorial = 1; for (let i = 1; i <= 5; i++) { factorial *= i; } console.log("5! = " + factorial); // 120 ``` ## حل المشاكل الشائعة ### 🔴 المشكلة 1: حلقة لا نهائية **السبب:** نسيت تحديث المتغير، أو الشرط دائماً `true`. **الحل:** تأكد من أن المتغير يتغير في كل تكرار. ```javascript // خطأ: let i = 1; while (i <= 5) { console.log(i); // ❌ لا يوجد i++ } // صحيح: let i = 1; while (i <= 5) { console.log(i); i++; // ✅ } ``` ### 🔴 المشكلة 2: خطأ off-by-one **السبب:** استخدام `<` بدلاً من `<=` أو العكس. ```javascript // يطبع 0-4 (5 أرقام): for (let i = 0; i < 5; i++) { } // يطبع 1-5 (5 أرقام): for (let i = 1; i <= 5; i++) { } ``` ### 🔴 المشكلة 3: تعديل مصفوفة أثناء المرور عليها **السبب:** إضافة أو حذف عناصر أثناء `for...of`. **الحل:** انسخ المصفوفة أولاً: ```javascript const arr = [1, 2, 3]; const copy = [...arr]; for (const item of copy) { arr.push(item * 2); } ``` ### 🔴 المشكلة 4: `for...in` على مصفوفة **السبب:** `for...in` تُرجع الفهارس كنصوص، وليس القيم. **الحل:** استخدم `for...of` أو `for` التقليدية. ```javascript const arr = ["a", "b", "c"]; // ❌ خطأ: for (const i in arr) { console.log(i); // "0", "1", "2" (نصوص) } // ✅ صحيح: for (const val of arr) { console.log(val); // "a", "b", "c" } ``` ## جدول الأوامر الأساسية <table> <thead> <tr> <th>الأمر</th> <th>الوظيفة</th> </tr> </thead> <tbody> <tr> <td><code>for (let i = 0; i &lt; n; i++)</code></td> <td>حلقة for التقليدية</td> </tr> <tr> <td><code>while (شرط)</code></td> <td>حلقة while</td> </tr> <tr> <td><code>do...while</code></td> <td>حلقة تنفذ مرة على الأقل</td> </tr> <tr> <td><code>for (const x of arr)</code></td> <td>المرور على قيم مصفوفة</td> </tr> <tr> <td><code>for (const k in obj)</code></td> <td>المرور على خصائص كائن</td> </tr> <tr> <td><code>break;</code></td> <td>الخروج من الحلقة</td> </tr> <tr> <td><code>continue;</code></td> <td>تخطي التكرار الحالي</td> </tr> </tbody> </table> ## قائمة تحقق نهائية <table> <thead> <tr> <th>المهمة</th> <th>الحالة</th> </tr> </thead> <tbody> <tr> <td>فهم حلقة for</td> <td>⬜</td> </tr> <tr> <td>فهم حلقة while</td> <td>⬜</td> </tr> <tr> <td>فهم do...while</td> <td>⬜</td> </tr> <tr> <td>استخدام for...of للمصفوفات</td> <td>⬜</td> </tr> <tr> <td>استخدام for...in للكائنات</td> <td>⬜</td> </tr> <tr> <td>استخدام break و continue</td> <td>⬜</td> </tr> <tr> <td>حل التمارين الثمانية</td> <td>⬜</td> </tr> </tbody> </table> ## ماذا بعد هذا المقال؟ الآن بعد أن أتقنت الحلقات، أنت جاهز للمقال التالي: 1. **الدوال (Functions)** — تنظيم الكود وإعادة استخدامه. 2. **المصفوفات والكائنات** — هياكل البيانات المتقدمة. 3. **DOM** — التفاعل مع صفحات الويب. ## الخلاصة في هذا المقال، تعلمت: - ✅ ما هي الحلقات ولماذا نحتاجها. - ✅ `for` التقليدية. - ✅ `while` و `do...while`. - ✅ `for...of` للمصفوفات. - ✅ `for...in` للكائنات. - ✅ `break` و `continue`. - ✅ الحلقات المتداخلة. - ✅ تجنب الحلقات اللانهائية. **تذكر:** الحلقات هي أداة قوية، لكنها تحتاج حذراً. تأكد دائماً من أن الحلقة ستتوقف في النهاية. **هل أتقنت الحلقات؟ شاركنا في التعليقات!**