Привет
Frewarning: эта тема тяжелая! Это взяло меня в неделю, чтобы даже начать голодать вокруг него. Возможно, вам придется прочитать это несколько раз также, я потратил бесчисленные часы, наблюдая, как YouTube видео на это. Я свяжу один из моих любимых в конце
О чем ты говоришь?
Генераторы! Функция ES6, которая в конечном итоге просто функция, чтобы повторить в течение ряда значений. Однако у него есть бонусная особенность! Что это такое? Я слышу, как вы спросите. Ну, позвольте мне попытаться объяснить, при использовании генератора вы можете в конечном итоге приостановить выполнение вашего кода, чтобы сделать что-то, а затем вернуться к нему позже в другом блоке клома. Они очень пугающие, чтобы начать, но в конечном итоге легко понять через некоторое время. Самым сложным битом для меня нашел примеру или несколько примеров, которые просто дадут мне, что я о том, почему они полезны, и почему они лучше, чем другие возможные способы работы (если я смогу найти примеры, показывающие оба пути Работа потом потрясающе!). Обычно я бы сначала посмотрел на способы работы ES5, на этот раз я собираюсь немного переключать его, и мы собираемся посмотреть на путь ES6, чтобы начать с!
Так что выглядит генератор
function * numberGenerator() {
yield 1
yield 2
yield 3
}
Обратите внимание на * После ключевого слова функции, который говорит нам, что это функция генератора. Тогда у нас есть новое ключевое слово урожай Это ключевое слово лечится как будто это мини-версия вернуть внутри функции.
function * numberGenerator() {
yield 1
yield 2
yield 3
}
const myNumbers = numberGenerator()
Когда вы называете генератор, как указано выше, он не начнет ничего делать, он будет в приостановленном состоянии, и он вернет объект генератора. В объекте генератора есть 3 прототипа, которые можно назвать Далее () , return () и бросить () Отказ Мы начнем, глядя на Далее () прототип.
следующий, пожалуйста!
Когда мы называем следующий прототип, по сути, мы делаем, – это рассказывать функцию генератора начать и запустить, пока она не ударит ключевое слово доходности, давайте посмотрим на пример:
function * numberGenerator() {
yield 1
yield 2
yield 3
}
const myNumbers = numberGenerator()
console.log(myNumbers.next()) // This will return { value: 1, done: false } in a console log
Здесь мы видим, что наш код начался и пробежал к первому урожайности 1. Выход этого дает нам объект со свойством значений и свойство выполненным, выполненное свойство будет ложным до тех пор, пока не указано последнее утверждение дохода.
function * numberGenerator() {
yield 1
yield 2
yield 3
}
const myNumbers = numberGenerator()
console.log(myNumbers.next()) // This will return { value: 1, done: false } in a console log
console.log(myNumbers.next()) // This will return { value: 2, done: false } in a console log
console.log(myNumbers.next()) // This will return { value: 3, done: false } in a console log
console.log(myNumbers.next()) // This will return { value: undefined, done: true } in a console log
Выше мы теперь видим, что после того, как мы пройдем все урожайности, мы видим значение undefined, с выполненным значением истинного. Чтобы сделать выполнение кода немного более четко, мы можем добавить несколько сообщений журнала в генератор OUT:
function * numberGenerator() {
console.log('Before 1')
yield 1
console.log('Before 2')
yield 2
console.log('Before 3')
yield 3
console.log('After 3')
}
const myNumbers = numberGenerator()
// We will see a console log stating "Before 1"
console.log(myNumbers.next()) // This will return { value: 1, done: false } in a console log
// We will see a console log stating "Before 2"
console.log(myNumbers.next()) // This will return { value: 2, done: false } in a console log
// We will see a console log stating "Before 3"
console.log(myNumbers.next()) // This will return { value: 3, done: false } in a console log
// We will see a console log stating "After 3"
console.log(myNumbers.next()) // This will return { value: undefined, done: true } in a console log
Вышесказанное делает немного яснее, чтобы понять, что когда мы впервые звоним .Next () Мы войдем нашу функцию и выполним до первого урожая, поэтому мы будем выводить До 1 а потом {Значение: 1, сделано: false} и так далее.
Так как насчет некоторых случаев использования?
Прежде чем написать эту статью, я хотел попытаться найти пример, который будет конкретным моим пониманием этой темы, честно говоря, я не могу сказать, что я полностью понимаю это Но вот мы, пробуем вещи, и, возможно, вы можете помочь мне понять больше случаев использования?
Создать идентификатор пользователя
function* generateId() {
let id = 1 // We could take this number from a database lookup
while (true) {
yield id
id++
}
}
const gen = generateId()
console.log(gen.next().value) // This would return 1 in a console log
console.log(gen.next().value) // This would return 2 in a console log
console.log(gen.next().value) // This would return 3 in a console log
В приведенном выше примере мы используем цикл во время, чтобы сделать наш генератор бесконечной петлей, всегда генерируя нам следующий номер. Преимущество здесь? Ну, если вы попытаетесь запустить в то время как (правда) Структура в своем собственном коде, вы потерте браузер в нескольких всего за несколько секунд и единственным способом остановить, чтобы убить процессы браузера на вашем ПК (не пытайтесь этого!), Делать это в генераторе значит, мы выполняем только один шаг за раз.
Могу ли я пройти параметры?
Да, вы можете пропустить параметры в функцию «Генераторы». Чтобы поставить его просто просто, вы можете пройти параметр, однако, если это первый раз звонить .Next () Это не будет никакого эффекта, потому что вы еще не дали ничего. Параметр отправлен на .Next () по существу заменяет предыдущий урожайность. Я постараюсь объяснить с примером кода ниже:
const maxScore = 5;
function* keepScore() {
let score = 0;
while (true) {
const addToScore = yield score // the first call to .next() will only run to here therefore returning 0
if(addToScore) { // addToScore is populated by the parameter you pass in after the first run
score += addToScore
}
}
}
const playerOne = keepScore()
console.log('score after first move: ')
console.log(playerOne.next()) // This would output 0
console.log('score after second move: ')
console.log(playerOne.next(3)) // This would output 3
console.log('score after third move: ')
console.log(playerOne.next(2)) // This would output 5
console.log('score after fourth move: ')
console.log(playerOne.next()) // This would output 5
console.log('score after fifth move: ')
console.log(playerOne.next(6)) // This would output 11
Сделать ранний выход
С генераторами можно выйти из функции, это можно сделать одним из двух способов. Во-первых, вы можете позвонить .вернуть () вместо следующего, чтобы сделать выход генератора, или вы можете использовать вернуть Заявление внутри самой функции генератора. Например:
const maxCount = 50;
let hitMax = false;
function* countUp() {
let count = 0
while (true) {
const addToCount = yield count
if(addToCount) {
count += addToCount;
}
if(count >= maxCount){
hitMax = true;
return `maxCount has been hit or exceeded`
}
}
}
const counting = countUp();
counting.next();
for(let i=0; !hitMax; i++){
console.log(counting.next(i));
}
console.log("I am done")
Выше мы будем подсчитать до Hitmax верно, после чего мы остановимся и выйду на наших для Цикл, в этом примере мы возвращаемся внутри генератора. Давайте посмотрим на альтернативу:
const maxCount = 50;
let hitMax = false;
function* countUp() {
let count = 0
while (true) {
const addToCount = yield count
if(addToCount) {
count += addToCount;
}
if(count >= maxCount){
hitMax = true;
}
}
}
const counting = countUp();
counting.next();
for(let i=0; !counting.next().done; i++){
if(!hitMax){
console.log(counting.next(i));
} else {
console.log(counting.return('maxCount has been hit or exceeded'))
}
}
console.log("I am done")
Выше мы должны работать немного по-другому, мы будем продолжать увеличиваться до тех пор, пока сделано Значение .Next () верно, внутри этой петли мы проверяем нашу логию Hitmax и если мы ударим это вместо того, чтобы снова подсчитываться, мы позвоним .return («MaxCount был ударен или превышен») которые устанавливают .Next (). Готово значение true и позволяет нам выводить сообщение «завершение».
Обзор
УХ ТЫ! Это было, безусловно, самая тяжелая тема, на которую я посмотрел, и я думаю, что по меньшей мере понял его на базовый уровень. Самая большая проблема, которую я обнаружил, нашел и понять случаи использования реального мира. Я до сих пор не думаю, что у меня 100% треснуло это с примером, возможно, у вас есть что-то лучше? Не стесняйтесь обмениваться примерами в комментариях, если вы делаете:) Самая большая точка, которую я узнал от этого, был:
Генератор позволяет вам выйти и повторно ввести функцию несколько раз, пока не будет выполнено выполненное значение, что означает, что вам не нужно иметь несколько функций, которые вы вызываете на разных этапах через жизненный цикл. Опять же, если у вас лучше объяснение, удари меня!
Узнайте JavaScript Generators Через 12 минут – веб-разработка Упрощенный
Оригинал: “https://dev.to/stefanwrightcodes/es6-a-beginners-guide-generators-48hj”