На прошлой недели в этом блоге, я опубликовал статью о Итераторах (Как перестать бояться и полюбить Итераторы). Итераторы часто используются вместе генераторами. Поэтому очевидным продолжением того поста, должна быть статья о Генераторах в Javascript.
При чтение рекомендуется весь код из статьи продублировать в каком-нибудь онлайн редакторе типа codesandbox.io.
Спонсор поста Реджери — удобный регистратор доменов и современный хостинг.
Regery позволяет небольшим предприятиям и организациям создавать онлайн-присутствие без необходимости в обширных технических знаниях или ресурсах.
Обычная функция, такая как эта, не может быть остановлена в процессе выполнения, пока она не завершит свою задачу, то есть будет выполнена ее последняя строка. Это называется моделью run-to-completion.
function normalFunc() {
console.log('I')
console.log('cannot')
console.log('be')
console.log('stopped.')
} Единственный способ выйти из normalFunc — это выполнить ее до конца, использовать return или столкнуться с ошибкой. Если вы снова вызовете функцию, она снова начнет выполнение сверху.
Напротив, генератор — это функция, которая может остановиться на полпути, а затем продолжить с того места, где остановилась.
Вот некоторые другие общие определения генераторов:
Пример генератора:
const generatorFunction = function* () {}; Переменной generatorFunction присваивается функция генератора. Функции генератора в ES6 обозначаются с использованием синтаксиса function*.
Вызов функции генератора должен возвращать объект итератора iterator вида:
{
value: Any,
done: true|false
} const generatorFunction = function* () {
// Это не выполняется.
console.log('a');
};
console.log(1);
const iterator = generatorFunction();
console.log(2);
// 1
// 2 Для выполнения тела генератора используется метод next():
const generatorFunction = function* () {
console.log('a');
};
console.log(1);
const iterator = generatorFunction();
console.log(2);
iterator.next();
console.log(3);
// 1
// 2
// a
// 3
Метод next() как было сказано выше возвращает объект, который указывает на ход итерации:
const generatorFunction = function* () {};
const iterator = generatorFunction();
console.log(iterator.next());
// Object {value: undefined, done: true}
Свойство done со значением true указывает, что тело генератора было пройдено и завершено.
Если нужно вернуть значение из генератора нужно использовать ключевое слово yield. yield приостанавливает выполнение генератора и возвращает управление итератору.
const generatorFunction = function* () {
yield;
};
const iterator = generatorFunction();
console.log(iterator.next());
console.log(iterator.next());
// Object {value: undefined, done: false}
// Object {value: undefined, done: true}
При приостановке генератор не блокирует очередь событий:
const generatorFunction = function* () {
var i = 0;
while (true) {
yield i++;
}
};
const iterator = generatorFunction();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
// Object {value: 0, done: false}
// Object {value: 1, done: false}
// Object {value: 2, done: false}
// Object {value: 3, done: false}
// Object {value: 4, done: false}
// Object {value: 5, done: false}
const generatorFunction = function* () {
yield 'foo';
};
const iterator = generatorFunction();
console.log(iterator.next());
console.log(iterator.next());
// Object {value: "foo", done: false}
// Object {value: undefined, done: true}
Может быть передан любой тип данных, включая functions, numbers, arrays и objects.
Так же когда генератор подходит к завершению, можно указать что бы return вернул последнее значение.
const generatorFunction = function* () {
yield 'foo';
return 'bar';
};
const iterator = generatorFunction();
console.log(iterator.next());
console.log(iterator.next());
// Object {value: "foo", done: false}
// Object {value: "bar", done: true}
Ключевое слово yield может получить значение обратно от итератора:
const generatorFunction = function* () {
console.log(yield);
};
const iterator = generatorFunction();
iterator.next('foo');
iterator.next('bar');
// bar
yield не получает первое значение «foo», потому оно не учитывается.
Объект итератора, возвращаемый генератором, соответствует «итеративному» протоколу. Таким образом, вы можете использовать оператор for … of для обхода генератора.
const generatorFunction = function* () {
yield 1;
yield 2;
yield 3;
return 4;
};
const iterator = generatorFunction();
for (const value of iterator) {
console.log(value);
}
// Should give us:
// 1
// 2
// 3 Но, если вы хотите превратить эту итерацию в массив, вам не нужно использовать for-of; вместо этого вы можете использовать «spread».
const iterator = generatorFunction(); const fromIterable = [...iterator]; console.log(fromIterable); // [1, 2, 3]
Универсальность итераций в JavaScript делает этот шаблон очень мощным. На самом деле, много конструкций в JavaScript либо принимают итерируемые объекты — iterables, либо сами по себе итерируемые — iterables! Например, массивы определяются как итерируемые.
Если вы хотите, вы можете использовать «spread» как список параметров для функции. Такая конструкция называется rest
someSpreadable(...iterable);
Не только массивы могут использовать spread; В общем случае все iterables могут применять оператор spread.
С помощью генераторов вы можете не только вывести (yield) одно значение (типа yield X), но вы также можете вывести другой yield . И так, вы можете переписать вышеупомянутую функцию generatorFunction, чтобы вывести (yield) отдельные 1, 2 и 3 из массива. Просто обязательно добавьте * сразу после ключевого слова yield.
function * generatorFunction() {
yield * [1, 2, 3];
}
В JavaScript операции ввода-вывода обычно выполняются как асинхронные операции, требующие обратного вызова. Для иллюстрации я собираюсь использовать тестовый сервис foo:
const foo = (name, callback) => {
setTimeout(() => {
callback(name);
}, 100);
}; Многочисленные асинхронные операции одна за другой создают вложенность, которую трудно читать.
const foo = (name, callback) => {
setTimeout(() => {
callback(name);
}, 100);
};
foo('a', (a) => {
foo('b', (b) => {
foo('c', (c) => {
console.log(a, b, c);
});
});
});
// a
// b
// c
Существует несколько способов решения этой проблемы, например, использование promises или генераторы. Используя генераторы, приведенный выше код можно переписать так. Но что бы его запустить нужно еще кое что:
(function* () {
const a = yield curry(foo, 'a');
const b = yield curry(foo, 'b');
const c = yield curry(foo, 'c');
console.log(a, b, c);
});
Чтобы запустить генератор, нам нужен контроллер. Контроллер должен выполнить асинхронные запросы и вернуть результат обратно.
/**
* Инициирует генератор и выполняет итерацию по каждой
* предоставленной функции через оператора yield.
*
* @param {Function}
*/const controller = (generator) => {
const iterator = generator();
const advancer = (response) => {
// Advance the iterator using the response of an asynchronous callback.
const state = iterator.next(response);
if (!state.done) {
// Make the asynchronous function call the advancer.
state.value(advancer);
}
}
advancer();
};
Последний шаг состоит в том, чтобы преобразовать асинхронные функции в функции, которые принимают один параметр (обратный вызов). Это позволяет выполнять итерацию экземпляра генератора, зная, что выражение yield всегда ожидает один параметр — обратный вызов, который используется для дальнейшего продвижения итерации.
/**
* Преобразует функцию, которая принимает несколько аргументов в
* функция, которая принимает только последний аргумент
* исходной функции.
*
* @param {Function}
* @param {...*}
*/const curry = (method, ...args) => {
return (callback) => {
args.push(callback);
return method.apply({}, args);
};
};
Конечным результатом является сценарий без слишком большого количества уровней вложенных обратных вызовов и с независимыми строками (выполнение одной операции больше не привязано к выполнению последующим после нее).
const foo = (name, callback) => {
setTimeout(() => {
callback(name);
}, 100);
};
const curry = (method, ...args) => {
return (callback) => {
args.push(callback);
return method.apply({}, args);
};
};
const controller = (generator) => {
const iterator = generator();
const advancer = (response) => {
var state;
state = iterator.next(response);
if (!state.done) {
state.value(advancer);
}
}
advancer();
};
controller(function* () {
const a = yield curry(foo, 'a');
const b = yield curry(foo, 'b');
const c = yield curry(foo, 'c');
console.log(a, b, c);
});
// a
// b
// c
Обычно ошибки обрабатываются для каждой отдельной асинхронной операции, например:
const foo = (name, callback) => {
callback(null, name);
};
foo('a', (error1, result1) => {
if (error1) {
throw new Error(error1);
}
foo('b', (error2, result2) => {
if (error2) {
throw new Error(error2);
}
foo('c', (error3, result3) => {
if (error3) {
throw new Error(error3);
}
console.log(result1, result2, result3);
});
});
});
// a
// b
// c
В следующем примере я разрешаю контроллеру выдавать ошибку и использую блок try … catch для захвата всех ошибок.
const foo = (parameters, callback) => {
setTimeout(() => {
callback(parameters);
}, 100);
};
const curry = (method, ...args) => {
return (callback) => {
args.push(callback);
return method.apply({}, args);
};
};
const controller = (generator) => {
const iterator = generator();
const advancer = (response) => {
if (response && response.error) {
return iterator.throw(response.error);
}
const state = iterator.next(response);
if (!state.done) {
state.value(advancer);
}
}
advancer();
};
controller(function* () {
let a,
b,
c;
try {
a = yield curry(foo, 'a');
b = yield curry(foo, {error: 'Something went wrong.'});
c = yield curry(foo, 'c');
} catch (e) {
console.log(e);
}
console.log(a, b, c);
});
// Something went wrong.
// a undefined undefined
Обратите внимание, что выполнение было прервано до вызова curry(foo, ‘c’).
Если вы хотите создать бесконечный ряд, вы можете создать генератор для этого. Он будет включать цикл while, и когда вы сделаете это, вы сможете использовать любых другие функции, которые вам понадобятся, для извлечения необходимых значений. Например давайте сгенерируем последовательность Фибоначчи.
function* fibonacci() {
let previous = 0
let i = 1;
while (true) {
[i, previous] = [previous, i + previous]
yield previous;
}
}
И, чтобы взять первые десять элементов последовательности, мы можем написать генератор для этого.
function * take(iterable, n) {
let i = 0;
for (let value of iterable) {
yield value;
i++;
if (i >= n) { break; }
}
}
После этого мы можем получить первые десять значений последовательности Фибоначчи.
const iterator = take(fibonacci(), 10); console.log([...iterator]); // -> [1, 1, 2, 3, 5, 8, 13, 21, 34, 55]
Итераторы и генераторы являются базовым функционал в JavaScript. Это выразительный способ как генерации значений так и способ перебора значение. Их необходимо хорошо знать, так как они активно используются многими программистами для решения множества задач. Надеюсь эта статья заинтересовало вас узнать о об этом больше. Бесплатная книга Exploring ES6 имеет главу о Generators. Axel Rauschmayer написал о генераторах гораздо больше, чем мне удалось осветить в этой статье. Рекомендую эту книга к прочтению.
Источники используемые в написание поста:
Sal Rahman — Elegant iteration in JavaScript with generators (https://dev.to/manlycoffee/elegant-javascript-with-generators-1720)
Gajus Kuizinas — The definitive guide to the JavaScript generators (https://dev.to/gajus/the-definitive-guide-to-the-javascript-generators-1deo)
Практические вопросы на закрепление материала по теме Генераторы
P.S. Так же на гитхабе есть неплохой образовательный проект JavaScript ES(6|2015) generators workshopper. Learn in practice. 🤘
Краткий перевод: https://vuejs.org/guide/components/v-model.html Основное использование v-model используется для реализации двусторонней привязки в компоненте. Начиная с Vue…
Сегодня мы рады объявить о выпуске Vue 3.4 «🏀 Slam Dunk»! Этот выпуск включает в…
Vue.js — это универсальный и адаптируемый фреймворк. Благодаря своей отличительной архитектуре и системе реактивности Vue…
Недавно, у меня истек сертификат и пришлось заказывать новый и затем устанавливать на хостинг с…
Каким бы ни было ваше мнение о JavaScript, но всем известно, что работа с датами…
Все, кто следит за последними событиями в мире адаптивного дизайна, согласятся, что введение контейнерных запросов…