2.1 生成器语法
在JavaScript中，生成器是一种特殊的函数，允许我们控制代码的执行。 它们可以暂停执行并在以后恢复，这使得它们在处理异步代码、迭代器和其他复杂任务时非常强大。
生成器通过 function* 定义（注意星号）。
在生成器内部，使用 yield 操作符来暂停执行并返回值。
生成器的声明：
JavaScript
function* generatorFunction() {
yield 1;
yield 2;
yield 3;
}
创建生成器对象
调用生成器不会立即执行其主体。相反，它返回一个生成器对象， 可以用来迭代获取值：
JavaScript
const gen = generatorFunction();
2.2 使用生成器
next() 方法
next() 方法用于恢复生成器的执行直到下一个 yield 操作符。
它返回一个包含两个属性的对象：
value: 由yield操作符传递的值done: 布尔值，指示生成器是否完成（true）或未完成（false）
使用 next() 方法的示例：
JavaScript
function* generatorFunction() {
yield 1;
yield 2;
yield 3;
}
const gen = generatorFunction();
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 }
迭代生成器
可以使用 for...of 循环来迭代生成器的值。
迭代生成器的示例：
JavaScript
function* generatorFunction() {
yield 1;
yield 2;
yield 3;
}
const gen = generatorFunction();
for (const value of gen) {
console.log(value);
}
// 输出: 1
// 输出: 2
// 输出: 3
返回值的示例
生成器可以用 return 操作符返回值：
JavaScript
function* generatorFunction() {
yield 1;
yield 2;
return 3;
yield 4; // 此 yield 永远不会执行
}
const gen = generatorFunction();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: true }
console.log(gen.next()); // { value: undefined, done: true }
2.3 复杂的生成器使用
与生成器交互
next() 方法可以接受一个参数，该参数传递给生成器并在内部使用。
传递值给生成器的示例：
JavaScript
function* generatorFunction() {
const value1 = yield 1;
const value2 = yield value1 + 2;
yield value2 + 3;
}
const gen = generatorFunction();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next(10)); // { value: 12, done: false }
console.log(gen.next(20)); // { value: 23, done: false }
console.log(gen.next()); // { value: undefined, done: true }
错误处理
生成器允许使用 try...catch 块来处理错误。
错误处理示例：
JavaScript
function* generatorFunction() {
try {
yield 1;
yield 2;
} catch (error) {
console.log('捕获到错误:', error);
}
}
const gen = generatorFunction();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.throw(new Error('出了点问题'))); // 捕获到错误: Error: 出了点问题
// { value: undefined, done: true }
生成无限序列的示例
生成器可以用于创建无限值序列：
JavaScript
function* infiniteSequence() {
let i = 0;
while (true) {
yield i++;
}
}
const gen = infiniteSequence();
console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
// 继续...
2.4 实际应用示例
示例 1: 用生成器迭代对象
JavaScript
function* objectEntries(obj) {
const keys = Object.keys(obj);
for (const key of keys) {
yield [key, obj[key]];
}
}
const obj = { a: 1, b: 2, c: 3 };
const gen = objectEntries(obj);
for (const [key, value] of gen) {
console.log(`${key}: ${value}`);
}
// 输出:
// a: 1
// b: 2
// c: 3
示例 2: 实现简单迭代器的生成器
JavaScript
const myIterable = {
*[Symbol.iterator]() {
yield 1;
yield 2;
yield 3;
}
};
for (const value of myIterable) {
console.log(value);
}
// 输出: 1
// 输出: 2
// 输出: 3
在JavaScript中，生成器是一个强大的工具，用于管理代码的执行、创建迭代器和处理异步操作。理解生成器的语法和使用帮助创建更灵活和可读性更好的代码，特别是在处理数据序列和异步任务时。
GO TO FULL VERSION