Пояснення що таке ітератори в 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 проектах.

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