各种 JavaScript 循环类型的解释

javascript 是最常用的编程语言之一。打算成为 JavaScript 工程师的开发人员必须学习循环的基础知识、它们的类型以及它们的工作原理。 

javaScript 循环是一种用于根据特定条件执行重复任务的工具。另一方面，“迭代”是一个通用术语，意思是在循环的上下文中重复。循环将继续迭代，直到满足停止条件。 

为了更好地理解它，您可以将其视为一种计算机化游戏，指示您向北走 X 步，然后向左走 Y 步。 

您可以表示take 7 steps northwards 为； 

for (let step = 0; step < 7; step++) {
  // Runs 7 times, with values of steps 0 through 6.
  console.log("Walking northwards one step");}

当上面的代码块被执行时，你会得到这个；

为什么通常使用循环？

• 执行重复性任务：您可以使用循环来执行指令，直到满足特定条件。 

• 遍历对象或数组：使用循环，您可以遍历对象的属性或数组的元素，从而允许您对每个属性或元素执行某些操作。 

• 过滤数据：您可以使用循环根据特定条件过滤数据。 

JavaScript 循环有不同的形式；For, While, Do...While,For...of和For...in。让我们详细探讨它们并演示它们是如何工作的。 

1、For loop

循环for将重复，直到指定条件的计算结果为真。for 循环具有三个可选表达式，后跟一个代码块。 

for (initialization; condition; finalExpression) {
  // code}

• 表达式initialization出现在第一个循环执行之前。该表达式通常会初始化一个或多个计数器。 

• condition每次循环运行之前都会检查一个表达式for。每次表达式的计算结果为真时，循环或语句中的代码都会执行。另一方面，当表达式的计算结果为 false 时循环停止。但是，如果省略表达式，表达式将自动计算为真。 

• finalExpression在每次循环迭代后执行。该表达式主要用于递增计数器。

您可以使用 {}，块语句，对多个语句进行分组和执行。如果您想在条件表达式计算结果为 false 之前提前退出循环，请使用 break 语句。 

for代码循环示例：

1. 使用for循环iterate;

for (let i = 0; i < 7; i++) {
  console.log(i);}

在这个代码块中；

• 变量 i 被初始化为零（设 i=0）。 

• 条件是 i 应该小于 7 (i=7)。 

• 如果 i 的值小于 7 (i<7>. 

• 迭代将在每次迭代后将 1 加到 i 的值 (++1)。 

2. 使用breakstatement 在条件计算为 false 之前退出循环；

for (let i = 1; i < 11; i += 2) {
  if (i === 9) {
    break;
  }
  console.log('Total developers: ' + i);}

• 代码块从 1 迭代到 10 (i<11)。

• 循环初始化一个i值为 1 的变量（令 i = 1）。 

• i如果 的值小于 11 (i < 11)， 循环条件将继续执行。

• 每次迭代后，值i增加 2 (i += 2)。 

if 语句评估 i 的值是否为 9。如果条件为真，则break 语句执行，循环终止。 

（image）

2、For…of loop

循环for…of遍历可迭代对象，例如Map、Array、Arguments和Set。此循环调用自定义迭代挂钩，其中包含针对每个不同属性的值执行的语句。 

a的基本结构for…loop是；

for (variable of object)
  statement

for…of循环的例子

1. For…of循环迭代一个array

const frontendLanguages = [ "html", "css", "JavaScript" , “react”];for (let i of frontendLanguages) {
  console.log(i);}

在这段代码中；

• 我们定义一个名为frontendLanguages

• 该数组具有三个元素；"HTML", "CSS",  "JavaScript" and “React”. 

• 遍历for…of loop中的每个元素frontendLanguages。

• 代码块中i的 占用了每次迭代期间每个元素的值以及打印在控制台上的值。 

2. For…of循环遍历 aSet

const s = new Set();s.add(2);s.add("grey");for (let n of s) {
  console.log(n);}

在这段代码中；

• 我们声明一个变量s，我们new Set使用 Set() 构造函数将其分配给 a 。

• 使用 add() 方法将两个元素添加到代码中

• 遍历for….of元素对象。

• 循环在执行console.log(n)语句之前将当前元素分配给 n。 

3. For…of循环遍历 aMap

const m = new Map();m.set(4, "rabbit");m.set(6, "monkey");m.set(8, "elephant");m.set(10, "lion");m.set(12, "leopard");for (let n of m) {
  console.log(n);}

在这个代码块中；

• 我们使用Map()构造函数创建一个新的 Map 对象。

• m声明了一个变量。

• 使用.set()方法，我们添加了五个键值对。

• 循环for…of遍历 Map 对象 m 的元素。 

3、For…in loop

循环for…in用于迭代对象的属性。循环的基本结构for…in是；

for (property in object) {
  // code}

您可以使用for…in循环遍历arraysand array-like objects。 

const shoppingList = { kales: 4, tomatoes: 2, cabbage: 0, lettuce:6, pumpkin:5 };for (const vegetable in shoppingList) {
  console.log(vegetable);}

在这个代码块中；

• 我们引入一个 JavaScript 对象并命名它shoppingList。 

• 我们使用 for 循环遍历使用shoppingListin 运算符的每个属性。 

• 在每次迭代中，循环在shoppingList. 

4、while

循环while评估 a condition，如果发现它是true，则执行代码块。但是，如果condition是false，循环结束，代码块将不会被执行。

这是循环的基本结构while； 

while (condition)
    Statement

测试条件必须出现在循环语句执行之前。您可以使用 {} 或块语句执行多个语句。 

while循环的例子

let n = 0;while (n < 9) {
  console.log(n);
  n++;}

在这段代码中；

• 变量n初始化为零值（令 n=0）。

• 只要 的值n小于 9 (n<9)，循环就会执行

• 的值n显示在控制台上，每次迭代后加1（n++）

• 代码将在 8 点停止执行。 

5、Do … While Loop

循环do…while迭代直到特定条件的计算结果为false。 

语句的一般结构do…while是；

do
  statementwhile (condition);

该语句执行一次但在检查条件之前。condition如果is则语句将执行true。但是，如果评估的condition是false，执行将停止，并且控制传递到 . 之后的语句do..while。循环中的代码do…while保证至少运行一次，即使条件的计算结果为true。 

do…while的例子

let n = 0;do {
  n += 1;
  console.log(n);} while (n < 7);

在这段代码中；

• 我们引入一个变量n并将其初始值设置为 0（设 n=0）。

• 我们的变量n进入一个 do...while 循环，在每次迭代后它的值递增 1 (n+=1)

• 的值n被记录下来。

• 只要 的值n小于 7 (n<7)，循环就会继续执行。 

当您运行此代码时，控制台将显示 n 的值，从 1 开始到 7，因为循环执行了 7 次。

6、Nested Loop 嵌套循环

嵌套循环是我们在循环中有循环的情况。例如，我们可以将一个 for 循环嵌套在另一个 for 循环中。 

for (let outer = 0; outer < 5; outer += 2) {
  for (let inner = 0; inner < 6; inner += 2) {
    console.log(`${outer}-${inner}`);
  }}

• 有两个变量；outerandinner和 都初始化为零值。

• 每次迭代后，两个变量都递增 2

• andouter循环inner各重复三次。 

7、Loop control statements 循环控制语句

Loop control语句，有时称为“跳转语句”，会中断程序的正常流程。Break和continue是循环控制语句的例子。

中断语句

Break语句立即终止循环，即使条件尚未满足。 

for (let n = 1; n <= 26; n++) {
  if (n === 13) {
    console.log("Loop stops here. We have reached the break statement");
    break;
  }
  console.log(n);}

呈现的代码将显示为；

继续声明

Continue语句用于跳过某个代码块并为新的循环进行迭代。 

for (let n = 0; n <= 10; n++) {
  if (n === 5) {
    continue;
  }
  console.log(n);}

呈现的代码将显示为；

结论

以上是您将在原生 JavaScript 及其框架/库中遇到的常见循环。正如突出显示的那样，每种循环类型都有其用例和不同的行为。如果您选择了错误的循环类型，您可能会遇到错误，并且您的代码可能会显示出意想不到的行为。