حلقات for...of و for...in
في for وwhile كنت تدير العدّاد بنفسك. كثيراً ما تكون البيانات قائمة أو كائناً جاهزاً — تريد كل قيمة أو كل مفتاح، لا فهرساً مصنوعاً. for...of يعطيك القيمة التالية من iterable. for...in يعطيك المفتاح التالي على كائن. نفس عائلة التكرار؛ ما يدخل متغير الحلقة مختلف.
ماذا يفعل for...of؟
يشغّل الجسم مرة لكل قيمة في iterable. للمبتدئ، المصفوفات والنصوص هي الحالات اليومية. تكتب for (const item of list) — في كل جولة item هو القيمة التالية. لا تكتب i < list.length إلا إذا أردت حلقة فهرس عمداً.
for...of و for...in والحلقات الكلاسيكية
📊 أشكال المشي اليومية
| الشكل | ماذا يحمل متغير الحلقة | متى يناسب |
|---|---|---|
for...of |
قيمة من iterable | كل فاكهة في مصفوفة؛ كل حرف في نص |
for...in |
مفتاح (اسم خاصية) على كائن | كل اسم حقل على كائن بسيط |
for كلاسيكي |
فهرس تتحكم به | حين تحتاج الأرقام 0 و1 و2 |
while |
ما تحدّثه داخل الجسم | طالما قاعدة واحدة قائمة |
ابدأ بالمصفوفات مع for...of. لجأ إلى for...in حين القصة «كل اسم خاصية على هذا الكائن». أبقِ for الكلاسيكي حين يهمّ الفهرس نفسه.
const colors = ["red", "green", "blue"];
for (const color of colors) {
console.log(color);
}
امشِ على قيم المصفوفة
كل جولة تطبع نصاً: red ثم green ثم blue. متغير الحلقة هو القيمة نفسها — لا 0 و1 و2. إن أردت العناصر فقط، for...of أقصر من إدارة فهرس.
const word = "hi";
for (const ch of word) {
console.log(ch);
}
امشِ على أحرف النص
النصوص أيضاً iterable. يطبع h ثم i. عامل كل حرف كقيمة واحدة — مفيد لعمل حرف بحرف بسيط قبل واجهات نص أثقل.
const user = { name: "Ada", role: "dev" };
for (const key in user) {
console.log(key + "=" + user[key]);
}
امشِ على المفاتيح بـ for...in
هنا يصبح key أولاً "name" ثم "role". تقرأ القيمة بـ user[key]. فضّل for...in لمفاتيح الكائن البسيط القابلة للتعداد. لا تجعله أداتك الأولى لقيم المصفوفة — ذلك دور for...of.
احفظ القاعدة القصيرة: of → قيم، in → مفاتيح. خلطهما هو لبس المبتدئ الكلاسيكي.
const parts = ["A", "B", "C"];
let msg = "";
for (const p of parts) {
msg = msg + p + "-";
}
console.log(msg.slice(0, -1));
ابنِ رسالة من القيم
كل جولة تضيف حرفاً وشرطة. بعد الحلقة يحذف slice الشرطة الأخيرة فترى A-B-C. نفس فكرة الدمج من دروس الحلقات السابقة — الآن المشي على القيم مباشرة.
const nums = [10, 20, 30];
for (let i = 0; i < nums.length; i++) {
console.log("i=" + i + " value=" + nums[i]);
}
for (const n of nums) {
console.log("value=" + n);
}
متى تبقى حلقة الفهرس مفيدة؟
for الكلاسيكي يطبع الفهرس والقيمة. for...of يطبع القيم فقط. تحتاج رقم الموضع؟ أبقِ for بالفهرس. تريد العناصر فقط؟ فضّل for...of.
اعرض for...of على الصفحة
امشِ على مصفوفة بـ for...of، ابنِ سطراً قصيراً، واكتبه في الصفحة.
<!DOCTYPE html>
<html>
<head>
<title>for...of — page list</title>
</head>
<body>
<p id="out">…</p>
<script>
const items = ["tea", "milk", "honey"];
let line = "";
for (const item of items) {
line = line + item + " ";
}
let box = document.getElementById("out");
box.textContent = "list=" + line.trim();
</script>
</body>
</html>
تعرض الصفحة list=tea milk honey. غيّر عنصراً في المصفوفة، حدّث الصفحة، واقرأ السطر الجديد. استخدم for...of للقيم، وfor...in لمفاتيح الكائن، وfor الكلاسيكي حين يهمّ الفهرس. الدرس التالي يوجّه الحلقات بـ break وcontinue.
جرّب بنفسك
- سجّل كل قيمة في
["a", "b", "c"]بـfor...of. - سجّل كل حرف من
"ok"بـfor...of. - على
{ x: 1, y: 2 }استخدمfor...inواطبعkey=value. - ادمج
["1", "2", "3"]إلى1-2-3بـfor...of. - اكتب
forبالفهرس يطبع الفهرس والقيمة معاً. - في عرض HTML غيّر المصفوفة فقط، حدّث، واقرأ
list=.
أخطاء شائعة
- كتابة
for...inحين أردت قيم مصفوفة (for...of) - استخدام
for...ofعلى كائن بسيط (للمبتدئ ليس iterable بتلك الطريقة) - توقع فهارس
0و1و2منfor...of— يعطي قيماً لا فهارس - نسيان
user[key]بعدfor...inوتسجيل المفاتيح فقط حين تحتاج القيم أيضاً - حلقة فهرس طويلة حين يقرأ
for...ofأوضح
خلاصة
for...ofيمشي على قيم الـ iterable (مصفوفات، نصوص)for...inيمشي على مفاتيح الكائناتforالكلاسيكي يبقى حين تحتاج رقم الفهرسwhileيبقى لشرط مستمر واحد- ابنِ الرسائل بلصق القيم داخل الجسم
- التالي: break و continue — إيقاف جولة أو تخطيها
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى