Iterables і Iterators

1.1 Основні поняття

Ітератори та ітеровані об'єкти (iterables) у JavaScript є базовими концепціями, які дозволяють об'єктам бути перебираними. Ці концепції широко використовуються в сучасному JavaScript, особливо в таких конструкціях, як цикли for...of, оператор розповсюдження (spread operator), деструктуризація та багато інших. У цій лекції ми розглянемо, що таке iterables і iterators, як вони працюють і як їх створювати та використовувати.

Iterables (Ітеровані об'єкти)

Ітеровані об'єкти — це об'єкти, які реалізують протокол ітерації. У них має бути спеціальний метод із ключем [Symbol.iterator], який повертає об'єкт-ітератор.

Iterators (Ітератори)

Ітератор — це об'єкт із методом next(), який повертає об'єкт із двома властивостями:

• value — значення наступного елемента послідовності
• done — булеве значення, яке вказує, чи закінчилась послідовність (true) чи ні (false)

Розглянемо приклади використання.

Вбудовані ітеровані об'єкти

JavaScript має кілька вбудованих ітерованих об'єктів, включаючи масиви, рядки, об'єкти Set та Map.

Приклад 1: Перебір масиву

    
      const array = [1, 2, 3, 4, 5];

      for (const item of array) {
        console.log(item);
      }

      // Виведе: 1 2 3 4 5
    
  

Приклад 2: Перебір рядка

    
      const string = 'hello';

      for (const char of string) {
        console.log(char);
      }

      // Виведе: h e l l o
    
  

1.2 Створення власних ітераторів

Ви можете створити власний ітератор, реалізуючи протокол ітерації — створення методу next().

Приклад 1: Створення ітератора

    
      function createIterator(array) {
        let index = 0;

        return {
          next: function() {
            if (index < array.length) {
              return { value: array[index++], done: false };
            } else {
              return { done: true };
            }
          }
        };
      }

      const myIterator = createIterator([1, 2, 3]);

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

Створення ітерованих об'єктів

Щоб об'єкт став ітерованим, він має реалізувати метод [Symbol.iterator]. Так, це така хитра назва. Ось як його створити.

Приклад 2: Створення ітерованого об'єкта

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

      for (const value of myIterable) {
        console.log(value);
      }

      // Виведе: 1 2 3
    
  

1.3 Вбудовані методи

Розглянемо вбудовані методи та оператори для роботи з ітерованими об'єктами.

Приклад 1: Оператор spread

Оператор spread (...) може використовуватись для копіювання чи об'єднання ітерованих об'єктів.

    
      const array = [1, 2, 3];
      const newArray = [...array, 4, 5, 6];

      console.log(newArray); // Виведе: [1, 2, 3, 4, 5, 6]
    
  

Приклад 2: Деструктуризація

Деструктуризація дозволяє витягати значення з ітерованих об'єктів.

    
      const [first, second, third] = [1, 2, 3];

      console.log(first);  // Виведе: 1
      console.log(second); // Виведе: 2
      console.log(third);  // Виведе: 3
    
  

Приклад 3: Методи Array.from і Array.of

Метод Array.from() дозволяє створити масив із ітерованого об'єкта.

    
      const set = new Set([1, 2, 3, 4, 5]);
      const array = Array.from(set);

      console.log(array); // Виведе: [1, 2, 3, 4, 5]