Generator 函数是 ES6 中的一个新特性，它可以让我们更方便地编写异步代码，同时也可以让我们更好地控制代码的执行流程。本文将介绍 Generator 函数的基础知识，包括定义、执行、暂停和恢复等方面，并通过实际示例代码演示其用法。
什么是 Generator 函数
Generator 函数是一种特殊的函数，它可以用来生成一个迭代器，每次调用迭代器的 next 方法，都会执行 Generator 函数中的一段代码，并返回一个包含 yield 表达式的对象。yield 表达式用来暂停 Generator 函数的执行，并将一个值传递给迭代器的调用者。
如何定义 Generator 函数
Generator 函数的定义方式和普通函数类似，只是在 function 关键字后面加上一个星号（*）：
function* myGenerator() {
yield 1;
yield 2;
yield 3;
}上面的代码定义了一个名为 myGenerator 的 Generator 函数，它包含三个 yield 表达式，每次调用 next 方法时都会返回一个包含当前 yield 表达式的值的对象。
如何执行 Generator 函数
要执行 Generator 函数，需要先创建一个迭代器对象，然后调用迭代器的 next 方法。每次调用 next 方法时，Generator 函数都会从上一次 yield 表达式的位置开始执行，直到遇到下一个 yield 表达式或者函数结束为止。
const iterator = myGenerator();
console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: 3, done: false}
console.log(iterator.next()); // {value: undefined, done: true}上面的代码创建了一个 myGenerator 的迭代器对象，然后连续调用了四次 next 方法，分别输出了三个包含 yield 表达式的对象和一个 done 属性为 true 的对象，表示 Generator 函数已经执行完毕。
如何暂停和恢复 Generator 函数的执行
在 Generator 函数中，yield 表达式用来暂停函数的执行，并将一个值传递给迭代器的调用者。当迭代器的 next 方法被调用时，Generator 函数会从上一次 yield 表达式的位置开始执行，直到遇到下一个 yield 表达式或者函数结束为止。
function* myGenerator() {
const result1 = yield 'step 1';
console.log(result1);
const result2 = yield 'step 2';
console.log(result2);
const result3 = yield 'step 3';
console.log(result3);
}
const iterator = myGenerator();
console.log(iterator.next()); // {value: "step 1", done: false}
console.log(iterator.next('result 1')); // "result 1"
// {value: "step 2", done: false}
console.log(iterator.next('result 2')); // "result 2"
// {value: "step 3", done: false}
console.log(iterator.next('result 3')); // "result 3"
// {value: undefined, done: true}上面的代码定义了一个包含三个 yield 表达式的 Generator 函数 myGenerator，每次调用 next 方法时都会执行下一个 yield 表达式，并将上一个 yield 表达式的值传递给迭代器的调用者。在第二次调用 next 方法时，还可以将一个值作为参数传递给 Generator 函数中上一个 yield 表达式的右侧，作为该 yield 表达式的返回值。
如何在 Generator 函数中使用 for...of 循环
在 ES6 中，我们可以使用 for...of 循环来遍历一个可迭代对象，例如数组、字符串、Map 和 Set 等。在 Generator 函数中，我们也可以使用 for...of 循环来遍历一个包含 yield 表达式的迭代器对象。
function* myGenerator() {
yield 1;
yield 2;
yield 3;
}
for (const value of myGenerator()) {
console.log(value);
}
// 1
// 2
// 3上面的代码使用 for...of 循环遍历了一个 myGenerator 的迭代器对象，输出了其中的三个值。
总结
Generator 函数是 ES6 中的一个新特性，它可以用来生成一个迭代器，每次调用迭代器的 next 方法，都会执行 Generator 函数中的一段代码，并返回一个包含 yield 表达式的对象。yield 表达式用来暂停 Generator 函数的执行，并将一个值传递给迭代器的调用者。在 Generator 函数中，我们可以使用 for...of 循环来遍历一个包含 yield 表达式的迭代器对象。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658edbc7eb4cecbf2d4a7276