Понимание генераторов в JavaScript

Автор выбрал фонд Open Internet/Free Speech для получения пожертвования в рамках программы Write for DOnations.

Введение

В ECMAScript 2015 были введены генераторы для языка JavaScript. Генератор — это процесс, который может быть остановлен и возобновлен, и может выдать несколько значений. Генаратор в JavaScript состоит из функции генераторов, которая возвращает элемент Generator, поддерживающий итерации.

Генераторы могут поддерживать состояние и обеспечивать эффективный способ создания итераторов, а также позволяют работать с бесконечным потоком данных, который можно использовать для установки бесконечной прокрутки на внешнем интерфейсе веб-приложений, для работы с данными звуковой волны и т. д. Кроме того, при использовании Promises генераторы могут имитировать функцию async/await, которая позволяет работать с асинхронным кодом более простым и читаемым способом. Хотя async/await является более распространенным способом работы с асинхронными вариантами использования, например извлечения данных из API, генераторы обладают более усовершенствованными функциями, что абсолютно оправдывает изучение методов их использования.

В этой статье мы расскажем, как создавать функции-генераторы, выполнять итеративный обход объектов Generator, объясним разницу между yield и return внутри генератора, а также коснемся других аспектов работы с генераторами.

Функции-генераторы

Функция-генератор — это функция, которая возвращает объект генератора и определяется по ключевому слову функции, за которым следует звездочка (*), как показано ниже:

// Generator function declaration function* generatorFunction() {} 

Иногда звездочка отображается рядом с названием функции напротив ключевого слова, например function *generatorFunction(). Это работает так же, но функция со звездочкой function* является более распространенной синтаксической конструкцией.

Функции-генераторы также могут определяться в выражении, как обычные функции:

// Generator function expression const generatorFunction = function*() {} 

Генераторы могут даже быть методами объекта или класса:

// Generator as the method of an object const generatorObj = {   *generatorMethod() {}, }  // Generator as the method of a class class GeneratorClass {   *generatorMethod() {} } 

В примерах, приведенных в данной статье, будет использоваться синтаксическая конструкция объявления функции генератора.

Примечание. В отличие от обычных функций, генераторы не могут быть построены с помощью нового ключевого слова и не могут использоваться в сочетании со стрелочными функциями.

Теперь, когда вы знаете, как объявлять функции-генераторы, давайте рассмотрим итерируемые объекты генератора, которые они возвращают.

Объекты генератора

Обычно функции в JavaScript выполняются до завершения, и вызов функции вернет значение, когда она дойдет до ключевого слова return. Если пропущено ключевое слово ​​​return, функция вернет значение undefined.

Например, в следующем коде мы декларируем функцию sum(), которая возвращает значение, состоящее из суммы двух целых аргументов:

// A regular function that sums two values function sum(a, b) {   return a + b } 

Вызов функции возвращает значение, которое представляет собой сумму аргументов:

const value = sum(5, 6) // 11 

Однако функция генератора не возвращает значение сразу, а вместо этого возвращает элемент Generator, поддерживающий итерации. В следующем примере мы декларируем функцию и придаем ей одно возвращаемое значение, как у стандартной функции:

// Declare a generator function with a single return value function* generatorFunction() {   return 'Hello, Generator!' } 

Активация функции генератора возвращает элемент Generator, который мы можем отнести к переменной:

// Assign the Generator object to generator const generator = generatorFunction() 

Если бы это была штатная функция, мы бы могли ожидать, что генератор даст нам строку, переданную в функцию. Однако фактически мы получаем элемент в приостановленном состоянии. Таким образом, вызов генератора даст результат, аналогичный следующему:

OutputgeneratorFunction {<suspended>}   __proto__: Generator   [[GeneratorLocation]]: VM272:1   [[GeneratorStatus]]: "suspended"   [[GeneratorFunction]]: ƒ* generatorFunction()   [[GeneratorReceiver]]: Window   [[Scopes]]: Scopes[3] 

Элемент Generator, возвращаемый функцией — это итератор. Итератор — это объект, имеющий метод ​​​​​​next()​​​, который используется для итерации последовательности значений. Метод next() возвращает элемент со свойствами value и done. value означает возвращаемое значение, а done указывает, прошел ли итератор все свои значения или нет.

Зная это, давайте вызовем функцию next() нашего генератора и получим текущее значение и состояние итератора:

// Call the next method on the Generator object generator.next() 

Результат будет выглядеть следующим образом:

Output{value: "Hello, Generator!", done: true} 

Вызов next() возвращает значение Hello, Generator!, а состояние done имеет значение true, так как это значение произошло из return, что закрыло итератор. Поскольку итератор выполнен, статус функции генератора будет изменен с suspended на closed. Повторный вызов генератора даст следующее:

OutputgeneratorFunction {<closed>} 

На данный момент мы лишь продемонстрировали, как с помощью функции генератора более сложным способом можно получить значение функции return. Однако функции генератора также имеют уникальные свойства, которые отличают их от обычных функций. В следующем разделе мы узнаем об операторе yield и о том, как генератор может приостановить или возобновить выполнение.

Операторы yield

Генераторы вводят новое ключевое слово в JavaScript: yield. yield может приостановить функцию генератора и вернуть значение, которое следует за yield, тем самым обеспечивая более простой способ итерации значений.

В этом примере мы остановим функцию генератора три раза с помощью разных значений и вернем значение в конце. Затем мы назначим наш объект Generator для переменной генератора.

// Create a generator function with multiple yields function* generatorFunction() {   yield 'Neo'   yield 'Morpheus'   yield 'Trinity'    return 'The Oracle' }  const generator = generatorFunction() 

Сейчас, когда мы вызываем next()​​​​​ в функции генератора, она будет останавливаться каждый раз, когда будет встречать yield. done будет устанавливаться для false​​​ после каждого yield, указывая на то, что генератор не завершен. Когда она встретит return или в функции больше не будет yield, done переключится на true, и генератор будет завершен.

Используйте метод next() четыре раза в строке:

// Call next four times generator.next() generator.next() generator.next() generator.next() 

В результате будут выведены следующие четыре строки по порядку:

Output{value: "Neo", done: false} {value: "Morpheus", done: false} {value: "Trinity", done: false} {value: "The Oracle", done: true} 

Обратите внимание, что для генератора не требуется return. В случае пропуска последняя итерация вернет {value: undefined, done: true}​​​, по мере наличия последующих вызовов next() после завершения генератора.

Итерация по генератору

С помощью метода next() мы вручную выполнили итерацию объекта Generator​​​, получив все свойства value​​​ и done всего объекта. Однако, как и Array,Map и Set, Generator следует протоколу итерации и может быть итерирован с for...of:

// Iterate over Generator object for (const value of generator) {   console.log(value) } 

В результате будет получено следующее:

OutputNeo Morpheus Trinity 

Оператор расширения также может быть использован для присвоения значений Generator​​​ для массива.

// Create an array from the values of a Generator object const values = [...generator]  console.log(values) 

Это даст следующий массив:

Output(3) ["Neo", "Morpheus", "Trinity"] 

Как расширение, так и for...of​​​ не разложит return на значения (в этом случае было бы «The Oracle»).

Примечание. Хотя оба эти метода эффективны для работы с конечными генераторами, если генератор работает с бесконечным потоком данных, невозможно будет использовать расширение или for...of​​​ напрямую без создания бесконечного цикла.

Завершение работы генератора

Как мы увидели, генератор может настроить свое свойство done​​​ на true, а статус на closed путем итерации всех своих значений. Немедленно отменить действие генератора можно еще двумя способами: с помощью метода return() и метода throw().

С помощью return()​​ генератор можно остановить на любом этапе так, как будто выражение return было в теле функции. Вы можете передать аргумент в return() или оставить его пустым для неопределенного значения.

Чтобы продемонстрировать return(), мы создадим генератор с несколькими значениями yield, но без return в определении функции:

function* generatorFunction() {   yield 'Neo'   yield 'Morpheus'   yield 'Trinity' }  const generator = generatorFunction() 

Первый next() даст нам «Neo» c done установленным на false​​​. Если мы обратимся к методу return()​​​ на объекте Generator сразу после этого, мы получим переданное значение, и done будет установлено на true. Все дополнительные вызовы next() дадут завершенный ответ генератора по умолчанию с неопределенным значением.

Чтобы продемонстрировать это, запустите следующие три метода на генераторе:

generator.next() generator.return('There is no spoon!') generator.next() 

Будет получено три следующих результата:

Output{value: "Neo", done: false} {value: "There is no spoon!", done: true} {value: undefined, done: true} 

Метод return() заставил объект Generator завершить работу и проигнорировать все другие ключевые слова yield. Это особенно полезно в асинхронном программировании, когда необходимо, чтобы была возможность отмены для функции, например в случае прерывания веб-запроса, когда пользователь хочет выполнить другое действие, так как невозможно напрямую отменить Promise.

Если тело функции генератора может перехватывать ошибки и работать с ними, можно использовать метод throw() для перебрасывания ошибки в генератор. Это действие запустит генератор, перебросит в него ошибку и прекратит работу генератора.

Чтобы продемонстрировать это, мы поместим try...catch​​​ в тело функции генератора и зарегистрируем ошибку при ее наличии:

// Define a generator function with a try...catch function* generatorFunction() {   try {     yield 'Neo'     yield 'Morpheus'   } catch (error) {     console.log(error)   } }  // Invoke the generator and throw an error const generator = generatorFunction() 

Теперь мы запустим метод next()​​, за которым последует throw():

generator.next() generator.throw(new Error('Agent Smith!')) 

Результат будет выглядеть следующим образом:

Output{value: "Neo", done: false} Error: Agent Smith! {value: undefined, done: true} 

С помощью throw(), мы ввели ошибку в генератор, которая была перехвачена try...catch и зарегистрирована в консоли.

Методы и состояния объекта генератора

В следующей таблице представлен перечень методов, которые можно использовать на объектах Generator:

Метод Описание
next() Возвращает следующее значение генератора
return() Возвращает значение генератора и прекращает работу генератора
throw() Выдает ошибку и прекращает работу генератора

В следующей таблице перечислены возможные состояния объекта Generator:

Состояние Описание
suspended Генератор остановил выполнение, но не прекратил работу
closed Генератор прекратил выполнение из-за обнаружения ошибки, возвращения или итерации всех значений

yield делегирование

Помимо штатного оператора yield, генераторы могут также использовать выражение yield* для делегирования следующих значений другому генератору. Когда выражение yield* встречается в генераторе, оно входит в делегированный генератор и начинает итерацию по всем операторам yield до закрытия этого генератора. Это может быть использовано для разделения функций генератора для семантической организации кода, при этом итерация всех операторов yield будет происходить в правильном порядке.

Для демонстрации мы можем создать две функции генератора, одна из которых будет yield* оператором для другой:

// Generator function that will be delegated to function* delegate() {   yield 3   yield 4 }  // Outer generator function function* begin() {   yield 1   yield 2   yield* delegate() } 

Далее, давайте проведем итерацию посредством функции begin():

// Iterate through the outer generator const generator = begin()  for (const value of generator) {   console.log(value) } 

Это даст следующие значения в порядке их генерирования:

Output1 2 3 4 

Внешний генератор выдал значения 1 и 2, затем делегировал другому генератору с yield*, который вернул 3 и 4.

yield* также может делегировать любому итерируемому объекту, например Array или Map. Yield делегирование может быть полезным для организации кода, поскольку любая функция в рамках генератора, использующая yield, также должна быть генератором.

Бесконечный поток данных

Один из полезных аспектов генератора — способность работать с бесконечными потоками и коллекциями данных. Это можно увидеть на примере бесконечного цикла внутри функции генератора, который увеличивает число на 1.

В следующем коде мы определяем функцию генератора и затем запускаем генератор:

// Define a generator function that increments by one function* incrementer() {   let i = 0    while (true) {     yield i++   } }  // Initiate the generator const counter = incrementer() 

Затем проводим итерацию значений с использованием next():

// Iterate through the values counter.next() counter.next() counter.next() counter.next() 

Результат будет выглядеть следующим образом:

Output{value: 0, done: false} {value: 1, done: false} {value: 2, done: false} {value: 3, done: false} 

Функция возвращает последовательные значения в бесконечном цикле, в то время как свойство done остается false, обеспечивая незавершенность.

При использовании генераторов вам не нужно беспокоиться о создании бесконечного цикла, так как вы можете останавливать и возобновлять выполнение по своему усмотрению. Однако, вы все-таки должны быть осторожны с тем, как вы активируете генератор. Если вы используете оператор расширения или for...of для бесконечного потока данных, вы одновременно будете проводить итерацию бесконечного цикла, что приведет к отказу среды.

Для более сложного примера бесконечного потока данных мы можем создать функцию генератора Fibonacci. Последовательность Фибоначчи, которая непрерывно складывает два предыдущих значения вместе, может быть записана с использованием бесконечного цикла в рамках генератора следующим образом:

// Create a fibonacci generator function function* fibonacci() {   let prev = 0   let next = 1    yield prev   yield next    // Add previous and next values and yield them forever   while (true) {     const newVal = next + prev      yield newVal      prev = next     next = newVal   } } 

Для тестирования мы можем создать цикл конечного числа и напечатать последовательность Фибоначчи в консоль.

// Print the first 10 values of fibonacci const fib = fibonacci()  for (let i = 0; i < 10; i++) {   console.log(fib.next().value) } 

В результате вы получите следующий вывод:

Output0 1 1 2 3 5 8 13 21 34 

Способность работать с бесконечными наборами данных — это одно из свойств, благодаря которым генераторы являются таким мощным инструментом. Эта способность может использоваться, например для установки бесконечной прокрутки на внешнем интерфейсе веб-приложений.

Передача значений в генераторы

В этой статье мы описывали использование генераторов в качестве итераторов и вырабатывали значения в каждой итерации. Помимо производства значений генераторы могут также потреблять значения от next(). В этом случае yield будет содержать значение.

Важно отметить, что первый вызванный next() не будет передавать значение, а только запустит генератор. Для демонстрации этого мы можем записать значение yield и вызывать next() несколько раз с некоторыми значениями.

function* generatorFunction() {   console.log(yield)   console.log(yield)    return 'The end' }  const generator = generatorFunction()  generator.next() generator.next(100) generator.next(200) 

Результат будет выглядеть следующим образом:

Output100 200 {value: "The end", done: true} 

Также возможно создать генератор с первоначальным значением. В следующем примере мы создадим цикл for и передадим каждое значение в метод next(), но также передадим аргумент в первоначальную функцию:

function* generatorFunction(value) {   while (true) {     value = yield value * 10   } }  // Initiate a generator and seed it with an initial value const generator = generatorFunction(0)  for (let i = 0; i < 5; i++) {   console.log(generator.next(i).value) } 

Мы извлечем значение из next() и создадим новое значение в следующей итерации, которое является предыдущим значением,умноженным на десять. В результате вы получите следующий вывод:

Output0 10 20 30 40 

Другой способ запуска генератора — завернуть генератор в функцию, которая всегда будет вызывать next() перед тем, как делать что-либо другое.

async/await в генераторах

Асинхронная функция — вид функции, имеющийся в ES6+ JavaScript, которая облегчает работу с асинхронными данными, делая их синхронными. Генераторы обладают более широким спектром возможностей, чем асинхронные функции, но способны воспроизводить аналогичное поведение. Реализация асинхронного программирования таким образом может повысить гибкость вашего кода.

В этом разделе мы продемонстрируем пример воспроизведения async/await с генераторами.

Давайте создадим асинхронную функцию, которая использует Fetch API для получения данных из JSONPlaceholder API (дает пример данных JSON для тестирования) и регистрирует ответ в консоли.

Для начала определим асинхронную функцию под названием getUsers, которая получает данные из API и возвращает массив объектов, затем вызовем getUsers:

const getUsers = async function() {   const response = await fetch('https://jsonplaceholder.typicode.com/users')   const json = await response.json()    return json }  // Call the getUsers function and log the response getUsers().then(response => console.log(response)) 

Это даст данные JSON, аналогичные следующим:

Output[ {id: 1, name: "Leanne Graham" ...},   {id: 2, name: "Ervin Howell" ...},   {id: 3, name": "Clementine Bauch" ...},   {id: 4, name: "Patricia Lebsack"...},   {id: 5, name: "Chelsey Dietrich"...},   ...] 

С помощью генераторов мы можем создать нечто почти идентичное, что не использует ключевые слова async/await. Вместо этого будет использоваться новая созданная нами функция и значения yield вместо промисов await.

В следующем блоке кода мы определим функцию под названием getUsers, которая использует нашу новую функцию asyncAlt (будет описана позже) для имитации async/await.

const getUsers = asyncAlt(function*() {   const response = yield fetch('https://jsonplaceholder.typicode.com/users')   const json = yield response.json()    return json })  // Invoking the function getUsers().then(response => console.log(response)) 

Как мы видим, она выглядит почти идентично реализации async/await, за исключением того, что имеется функция генератора, которая передается в этих значениях функции yield.

Теперь мы можем создать функцию asyncAlt, которая напоминает асинхронную функцию. asyncAlt​​​ имеет функцию генератора в качестве параметра и является нашей функцией, вырабатывающей промисы, которые получают возвраты. asyncAlt​​​ возвращает непосредственно функцию и решает каждый найденный промис до последнего:

// Define a function named asyncAlt that takes a generator function as an argument function asyncAlt(generatorFunction) {   // Return a function   return function() {     // Create and assign the generator object     const generator = generatorFunction()      // Define a function that accepts the next iteration of the generator     function resolve(next) {       // If the generator is closed and there are no more values to yield,       // resolve the last value       if (next.done) {         return Promise.resolve(next.value)       }        // If there are still values to yield, they are promises and       // must be resolved.       return Promise.resolve(next.value).then(response => {         return resolve(generator.next(response))       })     }      // Begin resolving promises     return resolve(generator.next())   } } 

Это даст тот же результат, что и в версии async/await:

Output[ {id: 1, name: "Leanne Graham" ...},   {id: 2, name: "Ervin Howell" ...},   {id: 3, name": "Clementine Bauch" ...},   {id: 4, name: "Patricia Lebsack"...},   {id: 5, name: "Chelsey Dietrich"...},   ...] 

Обратите внимание, эта реализация предназначена для демонстрации того, как можно использовать генераторы вместо async/await, и не является готовой для эксплуатации конструкцией. В ней отсутствуют настройки обработки ошибок и нет возможности передавать параметры в выработанные значения. Хотя этот метод может сделать ваш код более гибким, async/await зачастую является более оптимальным вариантом, так как способен абстрагировать детали реализации и позволяет сконцентрироваться на написании продуктивного кода.

Заключение

Генераторы — это процессы, которые могут останавливать и возобновлять выполнение. Они являются мощной, универсальной, хотя и не слишком распространенной функцией JavaScript. В данном учебном пособии мы узнали о функциях и объектах генератора, методах, доступных для генераторов, операторах yield и yield*, а также генераторах, используемых с конечными и бесконечными массивами данных. Мы также изучили один способ реализации асинхронного кода без вложенных обратных вызовов или длинных цепочек промисов.

Если вы хотите узнать больше о синтаксисе JavaScript, ознакомьтесь с учебными пособиями Понимание методов This, Bind, Call и Apply в JavaScript​​​ и Понимание объектов Map и Set в JavaScript.