理解 ES6 JavaScript 中的生成器

也许您听说过 ES6 中的这个功能，或者您只是没有时间去使用它。

这是我几天前学到的东西，非常酷。

让我分几个步骤向您解释一下。

因此，生成器看起来像一个普通函数，但它允许我们暂停函数的执行并稍后继续。

下面您可以看到生成器的一个示例，我们将对其进行分解以了解其工作原理：

function* avengersGenerator() { // Declaring the generator
  yield "Hulk"; // Pausing the execution
  yield "Thor";
  yield "Iron man";
  return "Ultron"; // Example of finishing the generator
  yield "Spiderman";
}

const iterator = avengersGenerator(); // Creating iterator

iterator.next(); // Iterating on the generator

codesandbox.io 上的源代码

声明生成器

生成器看起来与普通函数类似，唯一的区别是我们必须*在单词function后面定义一个（星号）。

function* avengersGenerator() {
  ...
}

屈服吧！

我们可以使用yield函数，当它到达第一个时，它基本上会停止函数的执行yield。

function* avengersGenerator() {
  yield "Hulk" // The execution would pause here.
  yield "Iron man" // When we resume we would start here.
}

创建迭代器

在迭代器上，我们可以调用。这样，我们就可以准备好生成器了。

const iterator = avengersGenerator();

下一个方法

这使我们能够继续执行该函数。此外，此方法还为我们提供了一个包含 yielded 值的对象，以及生成器是否已 yielded 其最后一个值（以布尔值形式）。

iterator.next(); // [1] Object {value: "Hulk", done: false}
iterator.next(); // [2] Object {value: "Thor", done: false}
iterator.next(); // [3] Object {value: "Iron man", done: false}
iterator.next(); // [4] Object {value: undefined, done: true}

返回/退出

一旦调用 return ，生成器就会结束。它基本上将done属性设置为true。

function* avengersGenerator() {
  yield "Hulk";
  return "Ultron"; // Example of finishing the generator
  yield "Thor"; //  Sad Thor and Spiderman wouldn't be called
  yield "Spiderman";
}

iterator.next(); // [1] Object {value: "Hulk", done: false}
iterator.next(); // [2] Object {value: "Ultron", done: true}

在我看来，生成器是一个很酷的东西，可以玩，或者至少知道它的作用。

在下一篇文章中，我将解释生成器如何帮助我解决工作中的一个案例，这要归功于ES6 中生成器在需要时取消承诺的可能性。

更新 1：我终于有时间写另一篇关于生成器的博客文章了，所以就在这里👉在 ES6 Javascript 中使用生成器取消承诺

感谢阅读

请在评论区告诉我你对这个生成器系列的感受。如果你喜欢它，你就知道该怎么做了！和你的朋友和同事分享吧。

如果您希望我在下一篇文章中讨论一些主题，请在dev.to或 twitter @phung_cz上给我发私信，或者如果您有任何建议，请随时在下面发表评论。

下次再见，继续黑客攻击✌

文章来源：https://dev.to/tuanphungcz/understanding-generators-in-es6-javascript-7fm