На этой неделе я решил узнать о генераторах JavaScript. Генераторы были представлены в 2015 году как часть обновления ES6 для JavaScript и были созданы как альтернатива методам итераторов. Их основное отличие состоит в том, что при выполнении генераторы запускают код только до выхода, а затем могут быть повторно запущены, выполняясь с того места, где остановился предыдущий выход. Итераторы будут выполнять код полностью, пока блок кода не будет завершен. Ниже я подробно расскажу о том, как работает генератор.

Все функции-генераторы должны включать звездочку (*) после ключевого слова function, чтобы JavaScript знал, что это функция-генератор. Как только мы объявим функцию генератора, нам нужно будет включить некоторые yields, которые будут возвращать значение после вызова генератора. Ниже я определил genX(), который запускает несколько console.logs между несколькими операторами yield.

Далее нам нужно будет установить функцию генератора равной переменной, чтобы мы могли создавать разные экземпляры этого генератора. С помощью console.logging gen мы можем видеть, что наш генератор genX() имеет несколько разных методов. Мы будем использовать метод next(), который будет выполнять блоки кода между каждым оператором yield.

ВРЕМЯ запустить код! Начнем с вызова gen.next(). Ниже мы получаем эти два файла console.log, а затем возвращаемый объект с ключами «value» и «done». Ключ «done» важен для нас, потому что он изменится на true только после того, как мы выполним последний оператор yield. До тех пор этот ключ говорит нам, что в генераторе еще есть код для запуска. На приведенном ниже снимке экрана показана полная последовательность genX().

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

Ниже я создал две разные переменные со значением genX(), дважды вызывая gen1 и один раз gen2. Как видите, он выполнил код до второго оператора yield в gen1 и до первого оператора yield в gen2.

Только из этой базовой демонстрации я могу представить все способы использования генераторов. Согласно моим исследованиям, многие разработчики используют циклы for, while и until в своих генераторах, что позволяет гораздо более эффективно выполнять код. Рад, что узнал об этом и добавил еще один инструмент в свой арсенал JavaScript.

Рекомендации

функция* — JavaScript | МДН. Веб-документы MDN, 20 июля 2021 г., https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*. По состоянию на 4 декабря 2021 г.

Итераторы и генераторы — JavaScript | МДН. Веб-документы MDN, 20 июля 2021 г., https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators. По состоянию на 4 декабря 2021 г.

Изучите генераторы JavaScript за 12 минут. YouTube, 31 июля 2021 г., https://youtu.be/IJ6EgdiI_wU. По состоянию на 4 декабря 2021 г.

Расия, Таня и Тимоти Нолан. Понимание генераторов в JavaScript. DigitalOcean, 28 февраля 2020 г., https://www.digitalocean.com/community/tutorials/understanding-generators-in-javascript. По состоянию на 4 декабря 2021 г.