Чтобы получать регулярные обновления, подпишитесь на еженедельную рассылку http://eepurl.com/gvbr7j.

Для получения регулярных обновлений подпишитесь на еженедельную рассылку, ‹a href="http://eepurl.com/gvbr7j'›Еженедельные обновления‹/a›.

В этой еженедельной серии мы увидим, что такое генераторы в javascript, и примеры использования генераторов. Понимание генераторов в Javascript — Еженедельник Javascript

Что такое Генераторы?

Во-первых, давайте попробуем понять эту концепцию с помощью простой аналогии.

Например, предположим, что вы смотрите фильм на своем ноутбуке. вдруг кто-то звонит в вашу дверь, это пицца, которую вы заказали. вы поставите фильм на паузу и получите пиццу, вернетесь и возобновите просмотр с того места, где остановились. правильно?

Точно так же генераторы в javascript работают по тому же принципу.

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

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

Например, взгляните на этот код ниже

setTimeout(function(){ console.log("Hello World"); },1); function foo() { // NOTE: don't ever do crazy long-running loops like this for (var i=0; i<=700; i++) { console.log(i); } } foo();

Однако функция setTimeout будет выполняться только после завершения цикла. невозможно прервать цикл for и выполнить функцию.

это проблема, которую решает функция Генераторы.

Реализация генераторов

Чтобы определить функцию как функцию-генератор, нам нужно определить ее со звездочкой (*). Например,

function* getData() { //yield comes here. }

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

Давайте разберемся с этой концепцией на примере,

function* getData() { for(let i=0;i < 10;i++){ console.log(yield getUser(i)); } } function getUser(value) { return { id : value, name : "John", age : 20 } } const get = getData(); console.log(get.next().value) console.log(get.next().value) console.log(get.next().value)

Здесь мы определяем функцию генератора для получения пользовательских данных. каждый раз, когда функция getData() встречает оператор yield с функцией getUser(), она выполняет функцию и возвращает данные в основную функцию.

нам нужно вызвать next(), чтобы выполнить итерацию и получить значение из функции генератора. он называется Generator Iterator s.

что такое генератор итераторов?

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

Например, рассмотрим массив со значениями

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

function *doIt() { yield 1; yield 2; yield 3; yield 4; yield 5; }

Чтобы пройти через значение функции генератора doIt(). нам нужно построить итератор. мы можем сделать это, определив,

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

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

мы получаем значение и что-то под названием done, которое указывает, достиг ли итератор конца функции или нет.

мы также можем использовать return вместо yield в функции-генераторе. Но проблема с return заключается в том, что оператор возврата цикла for..of будет отброшен. он не будет выполнен

с циклом for..of

function *doIt() { yield 1; yield 2; yield 3; yield 4; yield 5; return 6; } for (var v of doIt()) { console.log( v ); } // 1 2 3 4 5 console.log( v ); // still `5`, not `6` :(

Где мы используем функции генератора?

Самое главное, Redux Saga используется для обработки побочных эффектов Redux. если вы работали с react/redux, вы можете знать, как сложно поддерживать создателей действий и редюсеров в redux.

Redux-saga упрощает процесс поддержки создателей действий и редюсеров, группируя их под названием sagas.

Саги Redux явно используют функции генераторов для создания эффектов саги, таких как

  • Вызов API и получение данных из бэкенда
  • выбор значения из состояния редукции
  • выполнить каждое действие и выполнить некоторую бизнес-логику и отправить какое-либо другое действие.

Обещайте альтернативу

Прежде всего, его также можно использовать в качестве обещания, альтернативы async/await.

Поскольку большинство разработчиков использовали обещания, они не будут так часто использовать генераторы.

Но мы можем использовать Generator для решения проблемы, которую решает Promise, Async/Await.

Вывод

Хорошо, вот и все основы генераторов.

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

Чтобы получать регулярные обновления, подпишитесь на еженедельную рассылку http://eepurl.com/gvbr7j.

Удачного кодирования 🙂

Между тем, чтобы узнать больше о Javascript

Ты не знаешь JS

Первоначально опубликовано на https://cloudnweb.dev 30 июня 2019 г.