在 JavaScript 中，Generator 函数（生成器函数）是一种特殊类型的函数，它可以暂停执行并且可以在后续的某个时刻恢复执行。与普通函数不同，Generator 函数不会在调用时立即执行，而是返回一个 Generator 对象，你可以通过该对象控制函数的执行过程。
1. 如何定义一个 Generator 函数
Generator 函数使用 function* 语法进行定义。与普通函数不同，function* 后面有一个星号（*）。
function* myGenerator() {
yield 1;
yield 2;
yield 3;
}
在上述代码中，myGenerator 是一个 Generator 函数。它通过 yield 关键字来指定函数的暂停点，每次遇到 yield，函数会暂停并返回一个值。
2. Generator 函数的执行过程
Generator 函数返回的是一个 Generator 对象，这个对象有一个方法叫做 next()，每次调用 next() 方法时，Generator 函数会从上次暂停的位置继续执行，直到遇到下一个 yield 或者执行完毕。
使用 next() 方法
const gen = myGenerator(); // 调用 Generator 函数，返回一个 Generator 对象
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }
每次调用 next() 时，Generator 函数从上一次的暂停点继续执行，直到遇到 yield 或者函数执行完毕。当 Generator 函数执行完毕时，done 属性为 true，并且 value 为 undefined。
value是yield表达式返回的值。done是一个布尔值，表示是否执行完毕。
3. Generator 函数的特点
- 暂停和恢复执行：Generator 函数的最大特点是能够暂停执行，并且可以在后续恢复执行。通过
yield关键字指定暂停点。 - 惰性求值：Generator 函数是惰性求值的，意味着只有在需要时，才会计算下一个值。这使得它非常适合用于处理大的数据集或异步操作。
- 可以返回多个值：Generator 函数可以通过多个
yield语句返回多个值。
4. Generator 和 yield 的用法
yield 表达式
yield用于暂停函数的执行并返回一个值。每次调用next()方法，Generator 函数从yield语句处恢复执行。
function* countUpTo(max) {
let count = 0;
while (count < max) {
yield count; // 暂停并返回 count
count++;
}
}
const counter = countUpTo(3);
console.log(counter.next()); // { value: 0, done: false }
console.log(counter.next()); // { value: 1, done: false }
console.log(counter.next()); // { value: 2, done: false }
console.log(counter.next()); // { value: undefined, done: true }
在这个例子中，countUpTo 生成器会返回从 0 到 2 的值，并在每次调用 next() 时继续。
5. Generator 函数与异步编程
Generator 函数可以和异步编程结合使用，配合 yield 和 Promise 可以实现类似同步的异步代码。
使用 Generator 处理异步操作
function* fetchData() {
const response1 = yield fetch('https://api.example.com/data1'); // 暂停，等待 Promise
const data1 = yield response1.json(); // 暂停，等待 Promise
console.log(data1);
const response2 = yield fetch('https://api.example.com/data2');
const data2 = yield response2.json();
console.log(data2);
}
上面的代码是一个异步操作的 Generator 函数，但是它本身并不会自动处理 Promise。为了能够在 yield 时等待异步操作，我们通常需要一些辅助工具，比如 co 库或 async/await。
6. 使用 for...of 循环遍历 Generator 对象
Generator 对象是 可迭代 的，因此可以使用 for...of 循环来遍历 Generator 的值。
function* myGenerator() {
yield 1;
yield 2;
yield 3;
}
for (const value of myGenerator()) {
console.log(value); // 输出: 1, 2, 3
}
这种方法简化了通过 next() 手动调用的过程。
7. Generator 函数的应用场景
- 异步操作：通过与
Promise配合，Generator 可以像同步代码一样写异步操作。 - 生成无限序列：Generator 可以用来生成无限序列，只有在需要时才生成下一个值，节省内存。
- 协程：通过 Generator 函数，可以实现类似协程的功能，管理函数之间的控制流。
总结
Generator 函数是 JavaScript 中的一个强大工具，它允许你在函数执行过程中暂停和恢复执行。通过 yield 关键字，你可以控制函数的执行顺序，使其变得非常适合处理异步操作、流式数据等场景。