欢迎来到这篇博客文章，我们正在研究JavaScript发电机的迷人世界。如果您想将您的编码技能提升到一个新的水平，并探索一个有力的管理操作工具，那么您来了。

在网络开发的快节奏景观中，管理任务和处理复杂数据流的数据可能非常具有挑战性。这就是JavaScript生成器发挥作用的地方。这些非凡的构造引入了一个新的控制和灵活性，使开发人员可以逐步暂停，恢复和迭代的代码。

在这篇博客文章中，我们将带您浏览JavaScript生成器的核心概念。我们将阐明他们的语法，探索他们的功能，并展示如何简化您的代码并使其更易于管理的示例。到本读物结束时，您不仅可以理解发电机的来龙去脉，而且还配备了知识，可以在自己的项目中有效地使用它们。

在我们开始对JavaScript生成器的探索时，脱颖而出，揭示了他们的潜力，并发现他们如何彻底改变您编写代码的方式。无论您是经验丰富的开发人员还是刚从JavaScript开始，这里都有一些有价值的东西。让我们开始！

JavaScript中的一个生成器是函数关键字之后具有*的函数。不可能使用箭头函数在JavaScript中创建生成器。发电机是非常简单地实现峰值接口的特殊功能。您可以在此博客文章中了解有关它们的更多信息。发电机的特殊性是yield关键字。使用yield，我们可以将新值返回到迭代中，而无需结束函数执行，只需将其放在暂停上，直到下一个值的下一个值并未完成为止。

function* range(start: number, end: number): Iterable<number> {
  let n = start;
  while (n <= end) {
    console.log("range next");
    yield n++;
  }
}

您可以注意到，范围生成器是一个简单的生成器函数，从*接近功能的关键字可以理解。使用简单的时刻，该函数检查当前值是否较小或等于末端值，如果为true，则使用yield返回值；否则存在于时期并关闭发电机。像迭代器一样，发电机只在有人要求next值时运行。

可以使用简单的环。

for (const num of range(1, 10)) {
  console.log(num);
}

使用峰值接口

const iterator = range(1, 10)[Symbol.iterator]();
while (true) {
  const { done, value } = iterator.next();
  if (done) break;
  console.log(value);
}

或使用传播操作员将所有值保存在数组中。

for (const num of [...range(1, 10)]) {
  console.log(num);
}

重要的是要记住，如果您使用传播操作员，您将失去所有发电机的好处，因为它运行了发电机，直到尚未完成以复制数组中的所有值。

也像迭代器一样，可以将发电机组合在一起。例如，我们可以创建一个映射生成器函数，该函数接受迭代器和转换函数，并使用生成器发出的值返回转换内部的计算。

这就是结果。

function* map<T, U>(
  iterable: Iterable<T>,
  callback: (value: T) => U
): Iterable<U> {
  for (const value of iterable) {
    yield callback(value);
  }
}

const mapRange = map(range(1, 10), value => value * 10);

for (const num of mapRange) {
  console.log(num);
}

这就是所有人。您可以在我的Youtube channel上找到有关它们的视频。

总而言之，JavaScript生成器是每个开发人员努力寻求更有效和灵活的编程的非凡工具。通过其独特的暂停和恢复执行的能力，生成器为管理复杂的数据和操作提供了创新的解决方案。

在此博客文章中，我们都浏览了JavaScript生成器的语法，用例和好处。我们已经看到了它们如何简化代码，使其更具可读性和可维护。

通过利用发电机的力量，您可以改变处理编程挑战的方式。这些构造不仅为处理任务提供了结构化的方法，而且还有助于编写较少错误且更易于推理的代码。

当您冒险进入发电机领域时，请记住，练习是关键。尝试不同的方案，探索与其他技术的相互作用，并逐渐将它们整合到您的项目中。随着时间的流逝，您将精通发电机来创建响应迅速，高效的应用程序。

因此，无论您是旨在驯服复杂的UI交互的前端开发人员还是处理复杂数据处理的后端工程师，生成器都为解决编程提供了新的视角。拥抱自己的力量，提高您的技能，并在JavaScript的动态世界中提升您的编码能力。

感谢您的阅读和快乐的生成！ ð©ð»ð»ð

n.b。您可以找到此帖子的代码here。