JavaScript 生成器：入门指南
最近，为了更好地巩固对 JavaScript 概念的理解，以便之后能在 React 中运用它们，我需要复习一下。生成器就是我之前不太理解的概念之一。因此，我决定整理一些基础知识，为初学者编写一份生成器入门指南。
引言：什么是生成器？
根据MDN 资源
生成器是可以退出并在之后重新进入的函数。它们的上下文（变量绑定）会在重新进入后保存。
生成器函数与普通函数类似，区别在于生成器函数可以暂停和恢复执行。生成器与迭代器也密切相关，因为生成器对象本身就是一个迭代器。
比较；生成器和函数
像下面这样的常规函数不能在完成任务（即执行完最后一行代码）之前停止。它遵循所谓的“运行至完成”模型。
function regularFunction() {
console.log('There')
console.log('is')
console.log('no')
console.log('stopping')
console.log('me')
}
退出函数的唯一方法regularFunction是使用退出return语句或抛出错误。如果再次调用该函数，它将从头开始重新执行。
与之相反，生成器函数可以在执行到一半时停止，然后从停止的地方继续执行。请参见下图；
句法
生成器函数是通过在关键字后添加 * 来创建的特殊语法，function就像这样function *，并且可以使用关键字暂停yield。
调用生成器函数时，最初并不会执行任何代码；相反，它会返回一个生成器对象。只有当生成器的 `get` 方法next()被调用时，代码才会执行并返回值。此时，代码会一直执行，直到遇到yield`return` 关键字，然后暂停，直到next()再次调用 `get` 方法。
function * createGenerator() {
yield 'This';
yield 'is';
yield 'a';
yield 'Generator';
}
const generator = createGenerator(); // assigning the Generator function to the generator constant
generator.next(); // { value: 'This', done: false }
generator.next(); // { value: 'is', done: false }
generator.next(); // { value: 'a', done: false }
generator.next(); // { value: 'Generator', done: false }
generator.next(); // { value: undefined, done: true }
generator.next()在上述最后一条语句之后重复调用只会return（或者更准确地说， ）返回yield同一个return对象：{ value: undefined, done: true }。
发电机运行中
遍历数组：
利用for of循环，我们可以遍历生成器，并yield在每次循环中遍历其内容。
// create an array of animals
const animalsList = ['Cat', 'Dog', 'Monkey', 'Bird', 'Fish'];
// create our looping generator
function* loop(arr) {
for (const item of arr) {
yield `I like a ${item} as a pet`;
}
}
const animalGenerator = loop(animalsList);
console.log(animalGenerator.next());
// Object { value: "I like a Cat as a pet", done: false }
console.log(animalGenerator.next());
// Object { value: "I like a Dog as a pet", done: false }
console.log(animalGenerator.next().value);
// "I like a Monkey as a pet"
现在，我们的生成器将遍历数组，每次调用时都会打印一个值.next()。要仅获取值，请使用.next().value，这样就不会打印生成器的状态。
.return()发电机
这样.return()我们就可以返回给定的值并完成生成器。
function* animalsList(){
yield 'Cat';
yield 'Dog';
yield 'Monkey';
}
const animals = animalsList();
console.log(animals.return());
// Object { value: undefined, done: true }
我们之所以value: undefined没通过考试，是因为我们在考试中什么都没通过return()。
概括
你很少会用到生成器。本文仅提供 JavaScript 生成器的基本介绍。生成器的功能远不止于此，你可以查阅MDN 官方文档，了解更多使用生成器的高级场景。
文章来源：https://dev.to/muqsitadam/javascript-generators-a-beginners-guide-1ojf