文章目录
- 创建 JavaScript 生成器
- 使用 yield 暂停执行
- 多个 yield 语句的工作原理
- 将参数传递给生成器函数
- 生成器用于实现迭代
- 生成器方法
- JavaScript return 与 yield 关键字
- 带 return 的 JavaScript 生成器函数
- JavaScript 生成器 Throw 方法
- 生成器的用途
- 参考文档
在本教程中，您将借助示例了解 JavaScript 生成器。在 JavaScript 中，生成器提供了一种使用函数和迭代器的新方法。
使用生成器，
- 您可以从函数内部的任何位置停止执行函数
- 并从暂停的位置继续执行代码
创建 JavaScript 生成器
要创建生成器，您需要首先使用 function* 符号定义生成器函数。生成器函数的对象称为生成器。
// define a generator function
function* generator_function() {
... .. ...
}
// creating a generator
const generator_obj = generator_function();注意：生成器函数用 * 表示。您可以使用 function* generatorFunc() {…} 或 function *generatorFunc(){…} 创建。
使用 yield 暂停执行
如上所述，您可以暂停生成器函数的执行，而不执行整个函数体。为此，我们使用 yield 关键字。例如，
// generator function
function* generatorFunc() {
console.log("1. code before the first yield");
yield 100;
console.log("2. code before the second yield");
yield 200;
}
// returns generator object
const generator = generatorFunc();
console.log(generator.next());输出
1. code before the first yield
{value: 100, done: false}这里，
- 创建了一个名为 generator 的生成器对象。
- 当 generator.next() 被调用时，执行到第一个 yield 的代码。遇到yield时，程序返回值并暂停生成器函数。
注意：您需要在使用之前将生成器对象分配给变量。
多个 yield 语句的工作原理
yield 表达式返回一个值。但是，与 return 语句不同，它不会终止程序。这就是为什么您可以从最后一个 yield 位置继续执行代码。例如，
function* generatorFunc() {
console.log("1. code before first yield");
yield 100;
console.log("2. code before the second yield");
yield 200;
console.log("3. code after the second yield");
}
const generator = generatorFunc();
console.log(generator.next());
console.log(generator.next());
console.log(generator.next());输出
1. code before first yield
{value: 100, done: false}
2. code before second yield
{value: 200, done: false}
3. code after the second yield
{value: undefined, done: true}这是该程序的工作原理。
- 第一个 generator.next() 语句执行代码直到第一个 yield 语句并暂停程序的执行。
- 第二个 generator.next() 从暂停位置开始程序。
- 当所有元素都被访问时，返回 {value: undefined, done: true}。
将参数传递给生成器函数
您还可以将参数传递给生成器函数。例如，
// generator function
function* generatorFunc() {
// returns 'hello' at first next()
let x = yield 'hello';
// returns passed argument on the second next()
console.log(x);
console.log('some code');
// returns 5 on second next()
yield 5;
}
const generator = generatorFunc();
console.log(generator.next());
console.log(generator.next(6));
console.log(generator.next());输出
{value: "hello", done: false}
6
some code
{value: 5, done: false}
{value: undefined, done: true}在上述程序中，
- 第一个 generator.next() 返回 yield 的值（在这种情况下，‘hello’）。但是，该值未分配给 let x = yield ‘hello’; 中的变量 x
{value: "hello", done: false}- 遇到 generator.next(6) 时，代码从 let x = yield ‘hello’; 开始，并将参数 6 分配给 x。此外，剩余的代码会执行到第二个 yield。
6
some code
{value: 5, done: false}- 当第三个 next() 被执行时，程序返回 {value: undefined, done: true}。这是因为没有其他的 yield 语句。
{value: undefined, done: true}生成器用于实现迭代
生成器提供了一种更简单的方法来实现迭代器。
如果要手动实现迭代器，则必须使用 next() 方法创建一个迭代器并保存状态。例如，
// creating iterable object
const iterableObj = {
// iterator method
[Symbol.iterator]() {
let step = 0;
return {
next() {
step++;
if (step === 1) {
return { value: '1', done: false};
}
else if (step === 2) {
return { value: '2', done: false};
}
else if (step === 3) {
return { value: '3', done: false};
}
return { value: '', done: true };
}
}
}
}
for (const i of iterableObj) {
console.log(i);
}输出
1
2
3由于生成器是可迭代的，因此您可以以更简单的方式实现迭代器。然后您可以使用 for…of 循环遍历生成器。例如，
// generator function
function* generatorFunc() {
yield 1;
yield 2;
yield 3;
}
const obj = generatorFunc();
// iteration through generator
for (let value of obj) {
console.log(value);
}生成器方法
方法 | 描述 |
next() | 返回 yield 值 |
return() | 返回一个值并终止生成器 |
throw() | 抛出错误并终止生成器 |
JavaScript return 与 yield 关键字
return 关键字 | yield 关键字 |
返回值并终止函数。 | 返回值并暂停函数但不终止函数。 |
可用于普通函数和生成器函数。 | 仅在生成器函数中可用。 |
带 return 的 JavaScript 生成器函数
您可以在生成器函数中使用 return 语句。return 语句返回一个值并终止函数（类似于常规函数）。例如，
// generator function
function* generatorFunc() {
yield 100;
return 123;
console.log("2. some code before second yield");
yield 200;
}
// returns generator object
const generator = generatorFunc();
console.log(generator.next());
console.log(generator.next());
console.log(generator.next());输出
{value: 100, done: false}
{value: 123, done: true}
{value: undefined, done: true} 在上面的程序中，当遇到 return 语句时，它返回值，done 属性变为 true，函数终止。因此，return 语句之后的 next() 方法不会返回任何内容。
注意：您也可以使用 return() 方法而不是上面代码中的 return 语句，类似 generator.return(123);
JavaScript 生成器 Throw 方法
您可以使用 throw() 方法在生成器函数上显式抛出错误。使用 throw() 方法会引发错误并终止函数。例如，
// generator function
function* generatorFunc() {
yield 100;
yield 200;
}
// returns generator object
const generator = generatorFunc();
console.log(generator.next());
// throws an error
// terminates the generator
console.log(generator.throw(new Error('Error occurred.')));
console.log(generator.next());输出
{value: 1, done: false}
Error: Error occurred.生成器的用途
- 生成器让我们在编写异步任务时编写更简洁的代码。
- 生成器提供了一种更简单的方法来实现迭代器。
- 生成器仅在需要时执行其代码。
- 生成器具有内存效率。
生成器是在 ES6 中引入的。一些浏览器可能不支持使用生成器。要了解更多信息，请访问JavaScript 生成器支持。
参考文档
[1] Parewa Labs Pvt. Ltd. (2022, January 1). Getting Started With JavaScript, from Parewa Labs Pvt. Ltd: https://www.programiz.com/javascript/generators
