Итераторы и генераторы on JSFlow

Итерируемые объекты и протокол итерации

Mon, 01 Jan 0001 00:00:00 +0000

Итерируемые объекты и протокол итерации #

Итерируемый объект (iterable) предоставляет метод [Symbol.iterator](), возвращающий итератор — объект с методом next(), который выдаёт значения { value, done }. Протокол итерации лежит в основе for...of, spread и части API коллекций; понимание его нужно до генераторов и async-итераторов.

Итератор вручную #

Минимальный итератор для трёх кодов статуса доставки:

function createStatusIterator(statuses) {
 let index = 0
 return {
 next() {
 if (index < statuses.length) {
 return { value: statuses[index++], done: false }
 }
 return { value: undefined, done: true }
 },
 }
}

const it = createStatusIterator(['pending', 'shipped', 'delivered'])
it.next() // { value: 'pending', done: false }
it.next() // { value: 'shipped', done: false }
it.next() // { value: 'delivered', done: false }
it.next() // { value: undefined, done: true }

Когда done: true, value обычно undefined и дальнейшие вызовы next() не обязаны менять состояние.

Генераторы

Mon, 01 Jan 0001 00:00:00 +0000

Генераторы #

Генератор — особая разновидность итератора: функция function* при вызове возвращает объект-генератор с методами next, return и throw. Ключевое слово yield приостанавливает выполнение и отдаёт значение наружу. Генераторы удобны для ленивых потоков данных — постраничная загрузка товаров, обход вложенных категорий, пошаговая сборка чекаута.

Объявление и первый `next()` #

function* orderIdSequence(prefix) {
 let n = 1
 while (true) {
 yield `${prefix}-${String(n).padStart(4, '0')}`
 n++
 }
}

const ids = orderIdSequence('ord')
ids.next() // { value: 'ord-0001', done: false }
ids.next() // { value: 'ord-0002', done: false }

Тело генератора не выполняется при вызове orderIdSequence('ord') — только при первом next().

Асинхронные итераторы

Mon, 01 Jan 0001 00:00:00 +0000

Асинхронные итераторы #

Асинхронный итератор реализует [Symbol.asyncIterator]() и возвращает объект, у которого next() отдаёт Promise на { value, done }. Цикл for await...of и async-генераторы async function* — основной способ последовательно обрабатывать данные из промисов и fetch без ручной цепочки then.

`for await...of` #

Перебирает async iterable — каждый шаг ждёт разрешения Promise:

async function loadOrderStatuses(ids) {
 const results = []
 for (const id of ids) {
 const res = await fetch(`/api/orders/${id}`)
 results.push(await res.json())
 }
 return results
}

Когда источник уже async iterable:

Итераторы и генераторы on JSFlow

Итерируемые объекты и протокол итерации

Итерируемые объекты и протокол итерации #

Итератор вручную #

Генераторы

Генераторы #

Объявление и первый next() #

Асинхронные итераторы

Асинхронные итераторы #

for await...of #

Объявление и первый `next()` #

`for await...of` #