Пояснення що таке ітератори в JavaScript і як вони працюють

Додано (оновлено): Jul 7, 2024, 5:57 PM
Пояснення що таке ітератори в JavaScript і як вони працюють

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

Що таке ітератори? 🤔

Ітератор - це об'єкт, який забезпечує механізм обходу колекції даних один за одним. Він має метод next(), який повертає наступний елемент у колекції.

Метод next() повертає об'єкт з двома властивостями:

  • value - значення поточного елемента.
  • done - булеве значення, яке вказує, чи завершено ітерацію.

Якщо done дорівнює true, це означає, що ітерація завершена і більше немає елементів для обходу.

Як створити ітератор? 🛠️

Ітератор можна створити вручну або використовувати вбудовані ітератори, доступні в JavaScript.

Створення власного ітератора

Для створення власного ітератора потрібно визначити об'єкт з методом [Symbol.iterator], який повертає об'єкт з методом next(). Ось приклад:


const myIterable = {
  [Symbol.iterator]() {
    let step = 0;
    return {
      next() {
        step++;
        if (step <= 5) {
          return { value: step, done: false };
        }
        return { value: undefined, done: true };
      }
    };
  }
};

// Використання ітератора
const iterator = myIterable[Symbol.iterator]();
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
// ...

Вбудовані ітератори в JavaScript

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


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

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

Символ Symbol.iterator 🔄

Символ Symbol.iterator визначає ітератор, який використовується для обходу колекції в конструкції for...of або інших контекстах, що очікують ітератор.

Ось приклад використання for...of з масивом:


const array = [1, 2, 3, 4, 5];
for (const value of array) {
  console.log(value); // 1, 2, 3, 4, 5
}

Генератори як ітератори 🚀

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

Приклад генератора:


function* generateSequence() {
  yield 1;
  yield 2;
  yield 3;
}

const generator = generateSequence();

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

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

Асинхронні ітератори ⏳

Асинхронні ітератори дозволяють обробляти послідовності асинхронних значень. Вони використовують метод Symbol.asyncIterator і повертають об'єкти з методом next(), який повертає проміси.

Приклад асинхронного генератора:


async function* asyncGenerateSequence() {
  yield 1;
  yield 2;
  yield 3;
}

const asyncGenerator = asyncGenerateSequence();

(async () => {
  console.log(await asyncGenerator.next()); // { value: 1, done: false }
  console.log(await asyncGenerator.next()); // { value: 2, done: false }
  // ...
})();

Практичне використання ітераторів 📊

Ітератори корисні у багатьох сценаріях, таких як обхід даних, обробка асинхронних операцій та генерація послідовностей.

Розглянемо приклад створення асинхронного ітератора для обходу асинхронних запитів:


async function* fetchUrls(urls) {
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    yield data;
  }
}

const urls = ['https://api.example.com/data1', 'https://api.example.com/data2'];
const dataIterator = fetchUrls(urls);

(async () => {
  for await (const data of dataIterator) {
    console.log(data);
  }
})();

Висновки 📋

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

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

Тип ітератора Опис
Синхронний ітератор Використовується для обходу синхронних колекцій даних.
Асинхронний ітератор Використовується для обходу асинхронних послідовностей.
Генератор Спеціальна функція, яка створює ітератори з використанням yield.

Сподіваємось, що ця стаття допомогла вам зрозуміти основи ітераторів у JavaScript та їх використання. 🎉


Поділіться з друзями: