JavaRush /Курси /Frontend SELF UA /Генератори

Генератори

Frontend SELF UA
Рівень 45 , Лекція 1
Відкрита

2.1 Синтаксис генераторів

Генератори в JavaScript — це спеціальні функції, які дозволяють керувати виконанням коду. Вони можуть призупиняти своє виконання і відновлювати його пізніше, що робить їх потужним інструментом для роботи з асинхронним кодом, ітераторами та іншими складними завданнями.

Генератори визначаються за допомогою функції function* (зверніть увагу на зірочку). Усередині генератора використовується оператор yield для призупинення виконання і повернення значення.

Оголошення генератора:

JavaScript
    
      function* generatorFunction() {
        yield 1;
        yield 2;
        yield 3;
      }
    
  

Створення об’єкта генератора

Виклик генератора не виконує його тіло одразу. Замість цього він повертає об’єкт генератора, який можна використовувати для ітерації по значеннях:

JavaScript
    
      const gen = generatorFunction();
    
  

2.2 Використання генераторів

Метод next()

Метод next() використовується для відновлення виконання генератора до наступного оператора yield. Він повертає об’єкт з двома властивостями:

  • value: значення, передане оператором yield
  • done: логічне значення, яке вказує, чи завершено генератор (true) чи ні (false)

Приклад використання методу next():

JavaScript
    
      function* generatorFunction() {
        yield 1;
        yield 2;
        yield 3;
      }

      const gen = generatorFunction();

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

Ітерація по генератору

Генератори можуть використовуватися з циклом for...of для ітерації по значеннях.

Приклад ітерації по генератору:

JavaScript
    
      function* generatorFunction() {
        yield 1;
        yield 2;
        yield 3;
      }

      const gen = generatorFunction();

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

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

Приклад повернення значень

Генератори можуть повертати значення за допомогою оператора return:

JavaScript
    
      function* generatorFunction() {
        yield 1;
        yield 2;
        return 3;
        yield 4; // Цей yield ніколи не буде виконаний
      }

      const gen = generatorFunction();

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

2.3 Складне використання генераторів

Взаємодія з генератором

Метод next() може приймати аргумент, який передається в генератор і може використовуватися всередині нього.

Приклад передачі значень у генератор:

JavaScript
    
      function* generatorFunction() {
        const value1 = yield 1;
        const value2 = yield value1 + 2;
        yield value2 + 3;
      }

      const gen = generatorFunction();

      console.log(gen.next()); // { value: 1, done: false }
      console.log(gen.next(10)); // { value: 12, done: false }
      console.log(gen.next(20)); // { value: 23, done: false }
      console.log(gen.next()); // { value: undefined, done: true }
    
  

Обробка помилок

Генератори дозволяють обробляти помилки за допомогою блоку try...catch.

Приклад обробки помилок:

JavaScript
    
      function* generatorFunction() {
        try {
          yield 1;
          yield 2;
        } catch (error) {
          console.log('Caught error:', error);
        }
      }

      const gen = generatorFunction();

      console.log(gen.next()); // { value: 1, done: false }
      console.log(gen.throw(new Error('Помилка сталася'))); // Caught error: Error: Помилка сталася

      // { value: undefined, done: true }
    
  

Приклад генератора для створення нескінченної послідовності

Генератори можуть використовуватися для створення нескінченних послідовностей значень:

JavaScript
    
      function* infiniteSequence() {
        let i = 0;
        while (true) {
          yield i++;
        }
      }

      const gen = infiniteSequence();

      console.log(gen.next().value); // 0
      console.log(gen.next().value); // 1
      console.log(gen.next().value); // 2

      // і так далі
    
  

2.4 Приклади практичного використання

Приклад 1: Генератор для ітерації по об’єкту

JavaScript
    
      function* objectEntries(obj) {
        const keys = Object.keys(obj);
        for (const key of keys) {
          yield [key, obj[key]];
        }
      }

      const obj = { a: 1, b: 2, c: 3 };
      const gen = objectEntries(obj);

      for (const [key, value] of gen) {
        console.log(`${key}: ${value}`);
      }

      // Виведе:
      // a: 1
      // b: 2
      // c: 3
    
  

Приклад 2: Генератор для реалізації простого ітератора

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

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

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

Генератори в JavaScript є потужним інструментом для керування виконанням коду, створення ітераторів і роботи з асинхронними операціями. Розуміння синтаксису і використання генераторів допомагає створювати більш гнучкий і читабельний код, особливо при роботі з послідовностями даних та асинхронними завданнями.

Коментарі
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ