探索 JavaScript 生成器:循环数组迭代

JavaScriptJavaScriptBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在本实验中,我们将探索 JavaScript 中生成器的概念,并学习如何创建一个无限循环遍历数组的循环生成器。我们将使用 yield 关键字和 while 循环来创建生成器,然后用不同的数组对其进行测试,以了解它的工作原理。在本实验结束时,你将对生成器以及它们如何在你的 JavaScript 项目中使用有更深入的理解。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript/BasicConceptsGroup -.-> javascript/variables("`Variables`") javascript/BasicConceptsGroup -.-> javascript/data_types("`Data Types`") javascript/BasicConceptsGroup -.-> javascript/arith_ops("`Arithmetic Operators`") javascript/BasicConceptsGroup -.-> javascript/loops("`Loops`") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("`Destructuring Assignment`") subgraph Lab Skills javascript/variables -.-> lab-28234{{"`探索 JavaScript 生成器:循环数组迭代`"}} javascript/data_types -.-> lab-28234{{"`探索 JavaScript 生成器:循环数组迭代`"}} javascript/arith_ops -.-> lab-28234{{"`探索 JavaScript 生成器:循环数组迭代`"}} javascript/loops -.-> lab-28234{{"`探索 JavaScript 生成器:循环数组迭代`"}} javascript/destr_assign -.-> lab-28234{{"`探索 JavaScript 生成器:循环数组迭代`"}} end

循环生成器说明

要开始练习编码,请打开终端/SSH 并输入 node。然后,创建一个无限循环遍历给定数组的生成器。以下是步骤:

  1. 使用一个不会终止的 while 循环,每次调用 Generator.prototype.next() 时都会 yield 一个值。
  2. 将取模运算符 (%) 与 Array.prototype.length 一起使用,以获取下一个值的索引,并在每次 yield 语句后增加计数器。

以下是 cycleGenerator 函数的示例:

const cycleGenerator = function* (arr) {
  let i = 0;
  while (true) {
    yield arr[i % arr.length];
    i++;
  }
};

然后你可以按如下方式使用该函数:

const binaryCycle = cycleGenerator([0, 1]);
binaryCycle.next(); // { value: 0, done: false }
binaryCycle.next(); // { value: 1, done: false }
binaryCycle.next(); // { value: 0, done: false }
binaryCycle.next(); // { value: 1, done: false }

按照这些说明,你可以创建一个无限循环遍历任何数组的循环生成器。

总结

恭喜你!你已经完成了循环生成器实验。你可以在 LabEx 中练习更多实验来提升你的技能。

您可能感兴趣的其他 JavaScript 教程