JavaScript Academy · درس

المكررات غير المتزامنة — for await...of والمولّدات غير المتزامنة

استخدموا المولّدات غير المتزامنة وfor await...of لاستهلاك القيم التي تصل مع مرور الوقت. وتعلّموا Symbol.asyncIterator وخطوط معالجة غير متزامنة بسيطة

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

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

لماذا التكرار غير المتزامن؟

الهدف: استهلاك قيم قد تصل لاحقًا.

  • تكرّر حلقات for await...of على العناصر القابلة للتكرار غير المتزامن
  • تنشئ async function* مولّدات غير متزامنة
  • تُميّز Symbol.asyncIterator الكائن على أنه قابل للتكرار غير المتزامن
  • مثال صغير على map غير المتزامن
المكررات غير المتزامنة — for await...of والمولّدات غير المتزامنة — رسم توضيحي 1

async function* و for await...of

ينتج المولّد غير المتزامن (async function*) قيمًا تستهلكها حلقة for await...of.

// Use an async generator to yield values (could be delayed in real apps)
(async function () {
  async function* countAsync(n) {
    for (let i = 1; i <= n; i = i + 1) {
      // In real code you could await a delay or I/O here
      yield i;
    }
  }

  for await (const x of countAsync(3)) {
    console.log("async value:", x);
  }
})();
المكررات غير المتزامنة — for await...of والمولّدات غير المتزامنة — رسم توضيحي 2

استدعاء next() غير المتزامن يدويًا

يعيد next() على المكرّر غير المتزامن وعدًا يُحلّ إلى { value, done }.

// Drive an async iterator manually with await it.next()
(async function () {
  async function* two() {
    yield "A";
    yield "B";
  }
  const it = two();
  console.log(await it.next()); // { value: "A", done: false }
  console.log(await it.next()); // { value: "B", done: false }
  console.log(await it.next()); // { value: undefined, done: true }
})();
المكررات غير المتزامنة — for await...of والمولّدات غير المتزامنة — رسم توضيحي 3

Symbol.asyncIterator في الكائنات

أضف [Symbol.asyncIterator]() يعيد مكرّرًا غير متزامن، لجعل الكائن متوافقًا مع for await...of.

// Mark a plain object as async-iterable via Symbol.asyncIterator
(async function () {
  const AsyncTwice = {
    from: function (a, b) {
      return {
        a: a, b: b,
        [Symbol.asyncIterator]: async function () {
          let step = 0;
          return {
            next: async function () {
              if (step === 0) { step = 1; return { value: a, done: false }; }
              if (step === 1) { step = 2; return { value: b, done: false }; }
              return { value: undefined, done: true };
            }
          };
        }
      };
    }
  };

  for await (const v of AsyncTwice.from("X", "Y")) {
    console.log("from object:", v);
  }
})();
المكررات غير المتزامنة — for await...of والمولّدات غير المتزامنة — رسم توضيحي 4

سلسلة map غير متزامنة

اربط المولّدات غير المتزامنة لبناء سلاسل معالجة صغيرة تنتظر كل خطوة.

// Async map: transform values lazily while awaiting work
(async function () {
  async function* countAsync(n) {
    for (let i = 1; i <= n; i = i + 1) {
      yield i;
    }
  }

  async function* asyncMap(iterable, fn) {
    for await (const v of iterable) {
      // fn can be async; await its result
      const out = await fn(v);
      yield out;
    }
  }

  const doubled = asyncMap(countAsync(4), async function (x) {
    // simulate async transform (no real delay for demo)
    return x * 2;
  });

  const collected = [];
  for await (const v of doubled) {
    collected.push(v);
  }
  console.log("doubled async:", collected);
})();
المكررات غير المتزامنة — for await...of والمولّدات غير المتزامنة — رسم توضيحي 5

ممارسات جيدة

نصائح:

  • تحتاج for await...of إلى عنصر قابل للتكرار غير متزامن (Symbol.asyncIterator).
  • استخدم async function* لتعريف المولّدات غير المتزامنة بسهولة.
  • ينتظر كل استدعاء لـ next()؛ لذلك أبقِ العمل صغيرًا للحفاظ على استجابة التطبيق.
المكررات غير المتزامنة — for await...of والمولّدات غير المتزامنة — رسم توضيحي 6

اختبار أساسيات العناصر القابلة للتكرار غير المتزامنة

فحص سريع: متطلبات العنصر القابل للتكرار غير المتزامن.

المكررات غير المتزامنة — for await...of والمولّدات غير المتزامنة — رسم توضيحي 7

مراجعة

مراجعة: استخدم async function* وyield لإنشاء مولّدات غير متزامنة. كرّر باستخدام for await...of، أو انتظر next() يدويًا. أنشئ سلاسل معالجة غير متزامنة صغيرة باستخدام مولّدات مساعدة.

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

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

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

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

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

هل درس «المكررات غير المتزامنة — for await...of والمولّدات غير المتزامنة» مجاني؟

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

ماذا ستتعلم في «المكررات غير المتزامنة — for await...of والمولّدات غير المتزامنة»؟

استخدموا المولّدات غير المتزامنة وfor await...of لاستهلاك القيم التي تصل مع مرور الوقت. وتعلّموا Symbol.asyncIterator وخطوط معالجة غير متزامنة بسيطة تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

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

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

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

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

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

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