各位观众老爷们，大家好！ 今天咱们来聊聊JavaScript里一个挺有意思的家伙——Generators（生成器）。 别看名字高大上，其实它能帮咱们解决一些实际问题，特别是关于“懒”和“流水线”的问题。
开场白：啥是Generators？
想象一下，你有个朋友特别懒，你让他给你做100个包子，他跟你说：“行，你啥时候要，我啥时候给你做一个。” Generators就有点像这个朋友，它不会一次性把所有结果都算出来，而是你问它要一个，它才给你一个。 这种“按需分配”的特性，就是惰性求值（Lazy Evaluation）。
Generators的基本语法
Generators的定义方式和普通函数不太一样，需要在function关键字后面加个*，并且使用yield关键字来暂停函数的执行并返回一个值。
function* numberGenerator() {
yield 1;
yield 2;
yield 3;
}
const generator = numberGenerator();
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }- *`function`**: 声明一个生成器函数。
yield: 暂停生成器函数的执行，并返回一个值。 每次调用next()方法，生成器函数会从上次暂停的地方继续执行，直到遇到下一个yield或者函数结束。generator.next(): 调用生成器函数的next()方法，会返回一个对象，包含value和done两个属性。value:yield后面的表达式的值。done: 一个布尔值，表示生成器函数是否执行完毕。true表示执行完毕，false表示还可以继续生成值。
Generators的“懒”特性
Generators最大的优点就是“懒”，它不会一次性把所有结果都计算出来，而是等你用到的时候才计算。 这种特性在处理大数据或者无限序列的时候非常有用，可以避免一次性加载大量数据到内存中，从而提高性能。
比如，我们要生成一个无限的斐波那契数列：
function* fibonacci() {
let a = 0;
let b = 1;
while (true) {
yield a;
[a, b] = [b, a + b];
}
}
const fib = fibonacci();
console.log(fib.next().value); // 0
console.log(fib.next().value); // 1
console.log(fib.next().value); // 1
console.log(fib.next().value); // 2
console.log(fib.next().value); // 3
console.log(fib.next().value); // 5
// ... 无限延伸如果我们用普通函数来生成斐波那契数列，可能会导致内存溢出，因为我们需要事先计算出所有的值并存储在数组中。 而使用Generators，我们只需要按需生成，内存占用非常小。
Generators的“流水线”特性
Generators还可以用来实现“流水线”处理数据。 我们可以把一个复杂的数据处理过程分解成多个小的步骤，每个步骤用一个Generator来处理，然后把这些Generator串联起来，形成一个流水线。
举个例子，假设我们有一个包含大量数字的数组，我们需要对这些数字进行以下处理：
- 过滤掉小于0的数字。
- 将剩余的数字乘以2。
- 计算所有结果的和。
我们可以用Generators来实现这个流水线：
function* filterNegative(numbers) {
for (const num of numbers) {
if (num >= 0) {
yield num;
}
}
}
function* multiplyByTwo(numbers) {
for (const num of numbers) {
yield num * 2;
}
}
function sum(numbers) {
let total = 0;
for (const num of numbers) {
total += num;
}
return total;
}
const data = [-1, 2, 3, -4, 5, 6];
const filtered = filterNegative(data);
const multiplied = multiplyByTwo(filtered);
const result = sum(multiplied);
console.log(result); // 32在这个例子中，filterNegative、multiplyByTwo都是Generator函数，它们分别负责过滤和乘以2的操作。 我们把这些Generator串联起来，形成一个流水线，最终得到结果。 这种方式可以提高代码的可读性和可维护性，也方便我们进行单元测试。
Generators 与 for...of 循环
Generators 天生就和 for...of 循环是好基友。 for...of 循环可以方便地遍历 Generators 生成的值。
function* countTo(max) {
for (let i = 1; i <= max; i++) {
yield i;
}
}
for (const num of countTo(5)) {
console.log(num); // 1 2 3 4 5
}因为 Generators 实现了迭代器协议，所以 for...of 循环可以自动调用 next() 方法来获取生成的值，直到 done 属性为 true。
*Generators 与 `yield` 委托**
有时候，我们需要在一个 Generator 函数中调用另一个 Generator 函数。 这时候，可以使用 yield* 关键字来进行委托。
function* generateEvenNumbers(max) {
for (let i = 2; i <= max; i += 2) {
yield i;
}
}
function* generateNumbers(max) {
yield 1;
yield* generateEvenNumbers(max); // 委托给 generateEvenNumbers
yield max + 1;
}
for (const num of generateNumbers(6)) {
console.log(num); // 1 2 4 6 7
}yield* generateEvenNumbers(max) 会将 generateEvenNumbers 生成的所有值都 yield 出来，相当于把两个 Generator 函数合并成了一个。
Generators 与异步编程
Generators 还可以用来简化异步编程。 在 async/await 出现之前，Generators 曾经是解决回调地狱的一种方案。 虽然现在 async/await 更加流行，但了解 Generators 在异步编程中的应用仍然很有价值。
我们可以使用一个库，例如 co，来自动执行 Generator 函数，并处理 yield 出来的 Promise 对象。
// 需要安装 co 库： npm install co
const co = require('co');
function fetchData(url) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = `Data from ${url}`;
resolve(data);
}, 1000);
});
}
function* main() {
const data1 = yield fetchData('url1');
console.log(data1);
const data2 = yield fetchData('url2');
console.log(data2);
return 'Done';
}
co(main).then(result => {
console.log(result);
});
// 大约 2 秒后输出：
// Data from url1
// Data from url2
// Done在这个例子中，co 库会自动执行 main Generator 函数，并等待 fetchData 返回的 Promise 对象 resolve。 这样，我们就可以用同步的方式来编写异步代码，避免了回调地狱。
Generators 的实际应用场景
- 处理大型数据集: Generators 可以按需加载和处理大型数据集，避免内存溢出。 例如，读取一个大型 CSV 文件，并逐行处理数据。
- 实现无限序列: Generators 可以生成无限序列，例如斐波那契数列、素数序列等。
- 状态管理: Generators 可以用来管理复杂的状态，例如游戏的状态机。
- 异步编程: 虽然
async/await更加流行，但 Generators 仍然可以用来简化异步编程。 - 测试: Generators 可以用来生成测试数据。
Generators 的优缺点
| 优点 | 缺点 |
|---|---|
| 惰性求值，节省内存 | 代码相对复杂，需要理解 yield 和 next() 的工作方式 |
| 可以实现流水线处理，提高代码可读性和可维护性 | 性能可能不如直接使用循环，因为需要频繁地暂停和恢复函数的执行。 |
可以简化异步编程（虽然现在 async/await 更加流行） |
浏览器兼容性问题（虽然现在大部分浏览器都支持 Generators，但老版本浏览器可能不支持） |
| 可以生成无限序列，例如斐波那契数列、素数序列等。 |
总结
Generators 是 JavaScript 中一个强大的特性，它可以用来解决很多实际问题。 它最大的优点是惰性求值和流水线处理，可以提高代码的性能、可读性和可维护性。 虽然 Generators 的学习曲线稍微陡峭一些，但掌握它绝对能让你在编程的道路上更上一层楼。
彩蛋：用 Generators 实现一个简单的迭代器
function createIterator(array) {
let index = 0;
return {
next: function() {
if (index < array.length) {
return { value: array[index++], done: false };
} else {
return { value: undefined, done: true };
}
}
};
}
const myArray = [1, 2, 3];
const iterator = createIterator(myArray);
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 }现在，我们用 Generator 来实现同样的功能：
function* createIteratorGenerator(array) {
for (let i = 0; i < array.length; i++) {
yield array[i];
}
}
const myArray = [1, 2, 3];
const iterator = createIteratorGenerator(myArray);
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 }可以看到，使用 Generators 可以大大简化迭代器的实现。
好了，今天的分享就到这里。 希望大家对 Generators 有了更深入的了解。 记住，编程的乐趣在于不断学习和探索，祝大家编程愉快！