es6生成器

by Sanket Meghani

通过Sanket Meghani

ES6生成器 (ES6 Generators)

Generators are one of the key features introduced in ES6. Contrary to normal functions which can only be entered at the beginning of the function, Generators are functions which can be exited and re-entered later with their context (variable bindings) saved across re-entrances. In other words, Generator function could return a value midway and resume it’s execution from midway later on.

生成器是ES6中引入的关键功能之一。 与只能在函数开头输入的常规函数​​相反，生成器是可以退出并在以后重新输入的函数，它们的上下文(变量绑定)保存在重新输入之间。 换句话说，Generator函数可以在中途返回一个值，然后在中途恢复执行。

A generator can be defined using a function keyword followed by an asterisk.

可以使用function关键字后跟星号来定义生成器。

The difference between calling a normal function and an iterator function is that calling a generator function does not execute the generator function immediately. It returns an iterator object for the generator instead. To execute the generator body we need to call next() method on the returned iterator.

调用普通函数和迭代器函数的区别在于，调用生成器函数不会立即执行生成器函数。 它改为为生成器返回一个迭代器对象。 要执行生成器主体，我们需要在返回的迭代器上调用next()方法。

let generator = myFirstGenerator(5);let output = generator.next();

When the iterator’s next() method is called, the generator function's body is executed until the first yield expression. Yield expression specifies the value to be returned. In the example above, calling generator.next() would execute the first console.log() statement and return output of (a + 5). The next() method returns an object in following structure.

调用迭代器的next()方法时，将执行生成器函数的主体，直到第一个yield表达式为止。 Yield表达式指定要返回的值。 在上面的示例中，调用generator.next()将执行第一个console.log()语句并返回(a + 5)的输出。 next()方法返回以下结构的对象。

{    value: 10, //Return value of yield expression. I.e 5 + 5    done: false //Weather generator has yielded it's last value}

We can print the returned yielded value using value property of the returned object.

我们可以使用返回对象的value属性打印返回的产生的值。

let generator = myFirstGenerator(5);let output = generator.next(); //output = {value: 10, done: false}

console.log('Output is: ', output.value); //Output is: 10

Calling next() again on the iterator would continue execution of generator from last yield expression until next yield expression or a return statement is encountered.

在迭代器上再次调用next()将从上一个yield表达式继续执行生成器，直到遇到下一个yield表达式或return语句为止。

output = generator.next(10); //output = {value: 15, done: true}

In our example, calling generator.next(10) would resume generator execution from line 4 with last yield expression value being 10 (i.e value passed to next()). Hence line 4 would be evaluated as b = 5 + 10 resulting into b = 15. On line 7 it returns the value of b and since this is the last return statement (i.e: no more yields left), done is set to true.

在我们的示例中，调用generator.next(10)将从第4行恢复生成器执行，最后一个yield表达式值为10(即，传递给next()的值)。 因此，第4行将被评估为b = 5 + 10，从而得出b =15。在第7行，它将返回b的值，并且由于这是最后一个return语句(即：不再剩余收益)，因此将done设置为true。

Calling the next() method with an argument will resume the generator function execution, replacing the yield statement where execution was paused with the argument from next().

用参数调用next()方法将恢复生成器函数的执行，并用next()的参数替换执行暂停的yield语句。

output = generator.next(15); //output = {value: 20, done: true}

Calling generator.next(15) would resume generator execution from line 4 with last yield expression value replaced by 15. Hence line 4 would be evaluated as b = 5 + 15 resulting into b = 20.

调用generator.next(15)将从第4行恢复生成器执行，最后一个yield表达式值替换为15。因此，第4行的计算结果为b = 5 + 15，结果为b = 20。

We can use yield* to delegate to another generator function.

我们可以使用yield *委托给另一个生成器函数。

面容 (Postface)

It is quite intriguing to know how this new feature could be used in practice. Redux-saga uses generator functions to make it easy to write asynchronous flows. We’ve just scratched the surface and there’s a lot more to them. I would love to hear your comments, suggestions or questions around ES6 generators and it’s use cases :).

知道如何在实践中使用此新功能非常有趣。 Redux-saga使用生成器函数使编写异步流变得容易。 我们只是从头开始，还有很多事情要做。 我很想听听您对ES6生成器及其用例的意见，建议或问题:)。

翻译自: https://www.freecodecamp.org/news/es6-generators-47a9c5290569/

es6生成器