JavaScript Academy · درس

بروتوكول القابلية للتكرار وfor...of

تعلّموا بروتوكول القابلية للتكرار: ‏Symbol.iterator وiterator.next() واستخدام for...of وspread وArray.from مع أمثلة مخصصة صغيرة

الدرس 1 من 38 خطوة

بروتوكول القابلية للتكرار وfor...of درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 1 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 3 دروس في المجموع.

الصورة الكبيرة

الهدف: قراءة وبناء كائنات iterable صغيرة.

  • معنى iterable
  • Symbol.iterator وiterator.next()
  • for...of وspread وArray.from
  • بناء مثال لعدّاد من 0 إلى N
بروتوكول القابلية للتكرار وfor...of — رسم توضيحي 1

for...of مع الأنواع المضمّنة

يعمل for...of مع الكائنات iterable المضمّنة مثل المصفوفات والسلاسل النصية، ويُرجع العناصر بالترتيب.

// Arrays and strings are iterable
const arr = [10, 20, 30];
for (const n of arr) {
  console.log("arr item:", n);
}

const word = "JS";
for (const ch of word) {
  console.log("char:", ch);
}
بروتوكول القابلية للتكرار وfor...of — رسم توضيحي 2

كائن iterable مخصّص

يحتوي iterable على [Symbol.iterator]() يعيد iterator، ويُرجع next() قيمًا من الشكل { value, done }.

// A tiny iterable that counts 0..max-1
const Counter = {
  make: function (max) {
    return {
      max: max,
      // Symbol.iterator returns an iterator object
      [Symbol.iterator]: function () {
        let i = 0;
        return {
          next: function () {
            if (i < max) {
              const out = { value: i, done: false };
              i = i + 1;
              return out;
            }
            return { value: undefined, done: true };
          }
        };
      }
    };
  }
};

for (const x of Counter.make(3)) {
  console.log("count:", x);
}
بروتوكول القابلية للتكرار وfor...of — رسم توضيحي 3

التكرار اليدوي

في الخلفية، يستدعي for...of الدالة next() بشكل متكرر حتى تصبح done: true.

// You can drive the iterator manually
const iterable = Counter.make(2);
const it = iterable[Symbol.iterator]();

console.log(it.next()); // { value: 0, done: false }
console.log(it.next()); // { value: 1, done: false }
console.log(it.next()); // { value: undefined, done: true }
بروتوكول القابلية للتكرار وfor...of — رسم توضيحي 4

Spread وArray.from

يستخدم كل من Spread وArray.from بروتوكول iterable أيضًا لجمع القيم.

// Spread (...) and Array.from consume iterables
const small = Counter.make(4);
const a1 = [...small];
const a2 = Array.from(Counter.make(3));

console.log("spread:", a1);
console.log("from :", a2);
بروتوكول القابلية للتكرار وfor...of — رسم توضيحي 5

عادات جيدة

نصائح:

  • أعِد iterator جديدًا في كل مرة داخل [Symbol.iterator].
  • اختم دائمًا بـ done: true لتجنّب الحلقات اللانهائية.
  • أبقِ الحالة محلية داخل إغلاق iterator.
بروتوكول القابلية للتكرار وfor...of — رسم توضيحي 6

اختبار بروتوكول iterable

تحقق سريع: جعل كائن iterable.

بروتوكول القابلية للتكرار وfor...of — رسم توضيحي 7

مراجعة

مراجعة: الأنواع المضمّنة مثل المصفوفات هي iterable. ولجعل كائنك iterable، أضف [Symbol.iterator]() يعيد iterator يحتوي على next(). استخدم for...of أو spread أو Array.from لاستهلاك القيم.

بروتوكول القابلية للتكرار وfor...of — رسم توضيحي 8
البدء مجانًا

تعلم JavaScript مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات
59
الدروس
200

الأسئلة الشائعة

هل درس «بروتوكول القابلية للتكرار وfor...of» مجاني؟

نعم — نص درس «بروتوكول القابلية للتكرار وfor...of» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 3 دروس في المجموع.

ماذا ستتعلم في «بروتوكول القابلية للتكرار وfor...of»؟

تعلّموا بروتوكول القابلية للتكرار: ‏Symbol.iterator وiterator.next() واستخدام for...of وspread وArray.from مع أمثلة مخصصة صغيرة تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 3.

كم من الوقت يستغرق درس «بروتوكول القابلية للتكرار وfor...of»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. بروتوكول القابلية للتكرار وfor...of
  2. دوال المولّد وyield وخطوط المعالجة الصغيرة
  3. المكررات غير المتزامنة — for await...of والمولّدات غير المتزامنة
← العودة إلى JavaScript Academy