50- دروس جافا سكربت – JS Iterables

### شرح مفصل لـ JS Iterables في لغة JavaScript

تعتبر الـ Iterables واحدة من المفاهيم الأساسية في لغة JavaScript التي تسهل التعامل مع المجموعات المختلفة من البيانات. تتضمن هذه المجموعات الكائنات مثل المصفوفات، والسلاسل النصية، والـ Maps، و الـ Sets. يمكن اعتبار الـ Iterable ككائن يمكن تكراره باستخدام حلقة `for…of`.

#### ما هو الـ Iterable؟

الـ Iterable هو كائن يحتوي على طريقة خاصة تُسمى `Symbol.iterator`. هذه الطريقة تُرجع كائنًا يُعرف بالـ Iterator. الـ Iterator هو كائن يتيح لك الوصول إلى عناصر الـ Iterable واحدًا تلو الآخر باستخدام الطريقة `next()`.

#### فهم الـ Iterator

يحتوي الـ Iterator على طريقة `next()`، والتي تُرجع كائنًا يحتوي على خاصيتين:

– `value`: يمثل القيمة الحالية التي يتم الوصول إليها.
– `done`: مؤشر يحدد ما إذا كان قد تم الوصول إلى نهاية الـ Iterable أم لا. إذا كانت قيمته `true`، فهذا يعني أنه لا توجد عناصر أخرى [شركة برمجة مصرية] للمرور [شركة برمجة مصرية] عليها.

#### أمثلة على الـ Iterables في JavaScript

1. **المصفوفات (Arrays)**

const array = [1, 2, 3, 4];
   const iterator = array[Symbol.iterator]();

   console.log(iterator.next()); // { value: 1, done: false }
   console.log(iterator.next()); // { value: 2, done: false }
   console.log(iterator.next()); // { value: 3, done: false }
   console.log(iterator.next()); // { value: 4, done: false }
   console.log(iterator.next()); // { value: undefined, done: true }
   

2. **السلاسل النصية (Strings)**

const string = "hello";
   const iterator = string[Symbol.iterator]();

   console.log(iterator.next()); // { value: "h", done: false }
   console.log(iterator.next()); // { value: "e", done: false }
   console.log(iterator.next()); // { value: "l", done: false }
   console.log(iterator.next()); // { value: "l", done: false }
   console.log(iterator.next()); // { value: "o", done: false }
   console.log(iterator.next()); // { value: undefined, done: true }
   

3. **الـ Maps**

const map = new Map();
   map.set('key1', 'value1');
   map.set('key2', 'value2');

   const iterator = map[Symbol.iterator]();

   console.log(iterator.next()); // { value: ["key1", "value1"], done: false }
   console.log(iterator.next()); // { value: ["key2", "value2"], done: false }
   console.log(iterator.next()); // { value: undefined, done: true }
   

4. **الـ Sets**

const set = new Set([1, 2, 3]);

   const iterator = set[Symbol.iterator]();

   console.log(iterator.next()); // { value: 1, done: false }
   console.log(iterator.next()); // { value: 2, done: false }
   console.log(iterator.next()); // { value: 3, done: false }
   console.log(iterator.next()); // { value: undefined, done: true }
   

#### استخدام حلقة `for…of`

تعتبر حلقة `for…of` واحدة من الطرق الشائعة لاستخدام الـ Iterables لأنها تبسط عملية التكرار بشكل كبير.

const array = ['a', 'b', 'c'];

for (const element of array) {
  console.log(element);
}
// Output:
// a
// b
// c

#### إنشاء Iterable مخصص

يمكنك إنشاء كائن Iterable خاص بك عن طريق تعريف طريقة `Symbol.iterator`.

const myIterable = {
  *[Symbol.iterator]() {
    yield 1;
    yield 2;
    yield 3;
  }
};

for (const value of myIterable) {
  console.log(value);
}
// Output:
// 1
// 2
// 3

### الخاتمة

تعتبر الـ Iterables جزءًا مهمًا من JavaScript، حيث توفر طريقة موحدة للتعامل مع المجموعات المختلفة من البيانات. من خلال استخدام الـ Iterables، يمكنك تبسيط عملية التكرار على العناصر وتحسين قراءة الكود وصيانته. سواء كنت تعمل مع المصفوفات، السلاسل النصية، أو حتى كائنات مخصصة، فإن مفهوم الـ Iterables يوفر لك الأدوات اللازمة للقيام بذلك بكفاءة.