举个简单的例子:

const strArr = ["red", "green", "blue", "black"];

const strGen = function*() {
    for(let str of strArr) {
        yield str;
    }
};

let gen = strGen();

for (let i = 0; i < 5; i++) {
    console.log(gen.next())
}

//prints: {value: "red", done: false} -> 5 times with different colors, if you try it again as below:

console.log(gen.next());

//prints: {value: undefined, done: true}

这真的很简单，它是这样工作的

Yield关键字只是帮助在任何时间异步暂停和恢复一个函数。 此外，它还有助于从生成器函数返回值。

以这个简单的生成器函数为例:

function* process() {
    console.log('Start process 1');
    console.log('Pause process2 until call next()');

    yield;

    console.log('Resumed process2');
    console.log('Pause process3 until call next()');

    let parms = yield {age: 12};
    console.log("Passed by final process next(90): " + parms);

    console.log('Resumed process3');
    console.log('End of the process function');
}

Let _process = process();

在调用_process.next()之前，它不会执行前两行代码，然后第一个yield将暂停函数。 要继续该函数直到下一个暂停点(yield关键字)，需要调用_process.next()。

您可以将多个yield看作是javascript调试器中单个函数中的断点。直到 你告诉导航下一个断点，它不会执行代码 块。(注意:不阻塞整个应用程序)

但是当yield执行暂停和恢复行为时，它也可以返回一些结果{value: any, done: boolean} 根据前面的函数，我们没有输出任何值。如果我们查看之前的输出，它将显示相同的{value: undefined, done: false} 值未定义。

让我们深入研究yield关键字。可选地，您可以添加表达式和设置分配一个默认可选值。(官方文档语法)

[rv] = yield [expression];

表达式:从生成器函数返回的值

yield any;
yield {age: 12};

rv:返回传递给生成器next()方法的可选值

简单地，您可以使用这种机制将参数传递给process()函数，以执行不同的yield部分。

let val = yield 99; 

_process.next(10);
now the val will be 10 

现在就试试

用法

懒惰的评价 无限的序列 异步控制流

引用:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield http://javascript.tutorialhorizon.com/2015/09/16/generators-and-yield-in-es6/ https://strongloop.com/strongblog/how-to-generators-node-js-yield-use-cases/

在我看来，MDN文档非常好。

The function containing the yield keyword is a generator. When you call it, its formal parameters are bound to actual arguments, but its body isn't actually evaluated. Instead, a generator-iterator is returned. Each call to the generator-iterator's next() method performs another pass through the iterative algorithm. Each step's value is the value specified by the yield keyword. Think of yield as the generator-iterator version of return, indicating the boundary between each iteration of the algorithm. Each time you call next(), the generator code resumes from the statement following the yield.

异步javascript调用之间的依赖关系。

另一个关于如何使用yield的好例子。

函数请求(url) { Axios.get (url).then((response) => { it.next(响应); }) ｝ 函数* main() { Const result1 = yield request('http://some.api.com'); Const result2 = yield request('http://some.otherapi?Id =' + result1。id); console.log('您的响应是:' + result2.value); ｝ Var it = main(); it.next ()

Yield关键字在javaScript函数使它生成器，

什么是JavaScript生成器?

生成器是产生一系列结果而不是单个值的函数，即您生成一系列值

这意味着生成器可以帮助我们与帮助迭代器异步工作，哦，hack迭代器是什么?真的吗?

迭代器意味着我们可以一次访问一个项

从哪里迭代器可以帮助我们一次访问第一项? 它帮助我们通过生成器函数访问项目，生成器函数中我们使用yield关键字，yield关键字帮助我们暂停和恢复函数的执行。

这里有一个简单的例子:

function *getMeDrink() {

    let question1 = yield 'soda or beer'; // execution will pause here because of yield
       
    if (question1 == 'soda') {
        return 'here you get your soda';
    }

    if (question1 == 'beer') {

        let question2 = yield 'What\'s your age'; // execution will pause here because of yield

        if (question2 > 18) {
            return "ok you are eligible for it";
        } else {
            return "Shhhh!!!!";
        }
    }
}

let _getMeDrink = getMeDrink(); // initialize it

_getMeDrink.next().value; // "soda or beer"

_getMeDrink.next('beer').value; // "What's your age"

_getMeDrink.next('20').value; // "ok you are eligible for it"

_getMeDrink.next().value; // undefined

让我简单地解释一下发生了什么

你注意到在每个yield关键字处执行被暂停，我们可以通过迭代器.next()访问第一个yield

它一次迭代到所有yield关键字，然后当没有更多的yield关键字时返回undefined，简单地说，你可以说yield关键字是断点，函数每次暂停，只有在使用迭代器调用它时才恢复，对于我们的例子:_getMeDrink.next()这是一个迭代器的例子，它帮助我们访问函数中的每个断点。

生成器示例: 异步/等待

如果你看到async/await的实现，你会看到生成器函数和承诺被用来使async/await工作，请指出任何建议，欢迎。

迟回答，也许现在每个人都知道收益率，但一些更好的文件已经出现。

将James Long的《Javascript的未来:生成器》中的一个例子改编为官方的Harmony标准:

function * foo(x) {
    while (true) {
        x = x * 2;
        yield x;
    }
}

当你调用foo时，你会得到一个Generator对象，它有一个next 方法。”

var g = foo(2);
g.next(); // -> 4
g.next(); // -> 8
g.next(); // -> 16

收益率有点像回报，你会得到一些回报。Return x返回x的值，但yield x返回一个函数，它为您提供了一个迭代到下一个值的方法。如果您有一个潜在的内存密集型过程，您可能希望在迭代期间中断这个过程，那么这个方法很有用。