JavaScript 中的产出运算符(yield)用于异步地暂停和恢复生成器函数。在 JavaScript 中,生成器函数是一种特殊的函数,可以在执行过程中暂停或恢复。生成器函数通过 'function*' 语法定义。yield 关键字只能在其包含的生成器函数中使用。
产出运算符会暂停生成器函数的执行,并通过迭代器协议返回其操作数(表达式)至生成器的调用者。
语法
JavaScript 中的 yield 运算符的语法如下:
yield expression;
参数
-
expression — 通过迭代器协议从生成器函数产出的值。如果省略了表达式,则产出
undefined
。
返回值
它返回传递给生成器的 next() 方法的可选值以恢复其执行。
生成器函数中的 Yield 运算符
为了理解 yield 运算符,我们先了解一下生成器函数的工作原理。
当调用一个生成器函数时,它会返回一个生成器对象。当这个生成器对象的 next() 方法被调用时,它会恢复生成器函数的执行。当遇到 yield 表达式时,它会暂停执行并将 yield 关键字后面的表达式返回给调用者(next() 方法)。
生成器对象的 next() 方法返回一个具有两个属性的迭代器对象——value 和 done。value 是表达式的实际值,而 done 是一个布尔值。如果生成器函数完全执行完毕,done 属性为 true,否则为 false。
下面是带有 yield 关键字(运算符)的生成器函数的一个完整示例代码:
function* test() {
yield expression;
}
const genObj = test();
genObj.next();
在上面的语法中,'function*' 用于创建一个名为 test 的生成器函数,并且 yield 关键字用于从函数返回 'expression'。
调用生成器函数 test 并将返回的生成器对象赋值给变量 genObj。next() 方法恢复函数的执行并在遇到 yield 表达式时返回迭代器对象。
让我们执行下面的 JavaScript 代码片段:
function* test() {
console.log("I'm before yield expression");
yield 20;
}
const genObj = test();
console.log(genObj.next());
注意,当我们调用 next() 方法时,它首先显示控制台中的消息,然后显示迭代器对象。
I'm before yield expression
{ value: 20, done: false }
示例:返回一个值
在下面的示例中,我们定义了 test() 生成器函数。我们在函数中使用了三次 yield 运算符分别返回一个数字、一个数组和一个字符串。
之后,我们四次使用 next() 方法来恢复函数的执行。每当控制流程遇到 yield 运算符时,它将停止执行并返回值。
在输出中,你可以观察到它返回包含 yield 运算符的操作数和布尔值的对象。
function* test() {
yield 20;
yield [1,2,3];
yield "Hello World";
}
let res = test();
console.log(res.next());
console.log(res.next());
console.log(res.next());
console.log(res.next());
输出:
{ value: 20, done: false }
{ value: [ 1, 2, 3 ], done: false }
{ value: 'Hello World', done: false }
{ value: undefined, done: true }
示例:返回 undefined
当我们省略 yield 关键字后面的表达式时,它将返回 undefined。
function* test() {
yield;
}
let res = test();
console.log(res.next());
console.log(res.next());
输出:
{ value: undefined, done: false }
{ value: undefined, done: true }
示例:向 next() 方法传递一个值
我们还可以向 next() 方法传递一个值。在下面的示例中,我们向第二个 next() 方法传递了 30。它将 yield 评估为 30。变量 result 被赋予 yield 的值,即评估为 30。
function* test() {
let result = yield 20;
console.log("default value paased to next() method " + result);
}
let res = test();
console.log(res.next());
console.log(res.next(30));
输出:
{ value: 20, done: false }
default value paased to next() method 30
{ value: undefined, done: true }
示例
在下面的代码中,我们使用循环,并在每次操作中使用 yield 运算符来停止函数的执行。之后,我们使用 next() 方法开始生成器函数的执行。
function* test() {
for (let p = 0; p < 6; p += 2) {
yield p;
}
}
let res = test();
console.log(res.next());
console.log(res.next());
console.log(res.next());
console.log(res.next());
输出:
{ value: 0, done: false }
{ value: 2, done: false }
{ value: 4, done: false }
{ value: undefined, done: true }
在实时开发中,程序员使用 'yield' 运算符来进行异步操作、惰性求值、任务调度、遍历大型数据集、创建自定义迭代器等。