Введение в итераторы и генераторы в JavaScript

Дядя Влад

С 2015 года EcmaScript6 (ES6) принес много улучшений в практике кодирования JavaScript. В JavaScript были введены многочисленные современные концепции, значительно улучшившие процесс программирования. В этой статье вы узнаете об итераторах и генераторах в JavaScript.

Итераторы и генераторы – это две разные концепции, но они используются одинаково. Они используются для перебора массивов и объектов в JavaScript.

Итераторы

Итераторы похожи на сложные циклы, которые можно приостанавливать. Итераторы состоят из функции next () , которая возвращает значение и статус выполнения. Поле значения – это значение в массиве по заданному индексу. done – это логическое значение, которое возвращает статус завершения итерации цикла.

Вот пример, демонстрирующий, как итераторы:

 function fruitIter(fruits){
 let index = 0;
 return {
 next: function(){
 return index < fruits.length ? { value: fruits[index++], done: false } : {done: true}
 }
 }
 }
 const fruitsArray = ["Mango", "Banana", "Grapes"];
 const fruits = fruitIter(fruitsArray);
 console.log(fruits.next().value);

Выход :

 манго

Когда вы передаете массив fruitsArray в методе fruitIter () возвращает итератор , который хранится в переменных фруктах. Переменная index в методе fruitIter () инициализируется значением 0. Этот метод возвращает функцию next (), которая помогает в циклическом перемещении по массиву . Функция next () проверяет, меньше ли индекс длины fruitArray . Если это так, то она возвращает две переменные: имя фруктового по этому индексу, и проделанный статус. При возврате этих значений он также увеличивает значение индекса.

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

Связанный: Что такое функция в программировании?

Генераторы

Генераторы похожи на итераторы, но возвращают несколько значений. Эти значения называются значениями доходности. Функции генератора записываются с использованием синтаксиса function * . * означает, что это не обычная функция, а генератор. Вот пример генераторов:

 function* printFruits(){
 yield "Mango";
 yield "Banana";
 yield "Grapes";
 }
 const fruit = printFruits();
 console.log(fruit.next());

Выход :

 {value: 'Mango', done: false}

В этом примере yield является итератором. Когда вы вызываете функцию printFruits () и печатаете fruit.next () , она дает вам объект, в котором вы получаете значение. Проделанное обозначает состояние , все ли значения были итерация.

Изучите структуры данных с помощью классов ES6 в JavaScript

JavaScript ES6 значительно продвинулся в практике кодирования. Не в последнюю очередь это создание структур данных с использованием классов ES6. Толкать. pop, и проложите свой путь к вершине и станьте профессионалом JavaScript!