每个 JavaScript 循环类型解释： [With Codeblocks and Examples]

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

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

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

您可以表示向北走 7 步；

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循环

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

for (initialization; condition; finalExpression) {

  // code

}

• 初始化表达式出现在第一个循环执行之前。 该表达式通常会初始化一个或多个计数器。
• 在 for 循环运行之前，每次都会检查条件表达式。 每次表达式的计算结果为真时，循环或语句中的代码都会执行。 另一方面，当表达式的计算结果为 false 时循环停止。 但是，如果省略表达式，表达式将自动计算为真。
• finalExpression 在每次循环迭代后执行。 该表达式主要用于递增计数器。

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

for 循环代码示例

使用for循环进行迭代；

for (let i = 0; i < 7; i++) {

  console.log(i);

}

在这个代码块中；

• 变量 i 被初始化为零（设 i=0）。
• 条件是 i 应该小于 7 (i=7)。
• 如果 i 的值小于 7 (i<7>.
• 迭代将在每次迭代后将 1 加到 i 的值 (++1)。

使用 break 语句在条件计算为 false 之前退出循环；

for (let i = 1; i < 11; i += 2) {

  if (i === 9) {

    break;

  }

  console.log('Total developers: ' + i);

}

• 代码块从 1 迭代到 10 (i<11)。
• 循环初始化一个值为 1 的变量 i（令 i = 1）。
• 如果 i 的值小于 11 (i < 11)，循环条件将继续执行。
• i 的值在每次迭代后增加 2 (i += 2)。

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

（图像）

For…of 循环

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

for…循环的基本结构是；

for (variable of object)

  statement

for…of 循环的例子

For…of 循环遍历数组

const frontendLanguages = [ "HTML", "CSS", "JavaScript" , “React”];

for (let i of frontendLanguages) {

  console.log(i);

}

在这段代码中；

• 我们定义一个名为 frontendLanguages 的数组
• 该数组具有三个元素； “HTML”、“CSS”、“JavaScript”和“React”。
• for…of 循环遍历 frontendLanguages 中的每个元素。
• 代码块中的 i 在每次迭代期间占用每个元素的值以及打印在控制台上的值。

For…of 循环遍历集合

const s = new Set();

s.add(2);

s.add("grey");

for (let n of s) {

  console.log(n);

}

在这段代码中；

• 我们声明了一个变量 s，我们使用 Set() 构造函数将其分配给一个新的 Set。
• 使用 add() 方法将两个元素添加到代码中
• for….of 遍历元素对象。
• 在执行 console.log(n) 语句之前，循环将当前元素分配给 n。

For…of 循环遍历 Map

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 的元素。

对于…在循环中

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

for (property in object) {

  // code

}

您可以使用 for…in 循环来遍历数组和类数组对象。

const shoppingList = { kales: 4, tomatoes: 2, cabbage: 0, lettuce:6, pumpkin:5 };

for (const vegetable in shoppingList) {

  console.log(vegetable);

}

在这个代码块中；

• 我们引入一个 JavaScript 对象并将其命名为 shoppingList。
• 我们使用 for 循环使用 in 运算符迭代 shoppingList 上的每个属性。
• 在每次迭代中，循环分配 shoppingList 中的当前属性名称。

尽管

while 循环评估一个条件，如果它发现它为真，则代码块执行。 但是，如果条件为假，循环结束，代码块将不会被执行。

这是 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 点停止执行。

做… While 循环

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

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

do

  statement

while (condition);

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

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 次。

嵌套循环

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

for (let outer = 0; outer < 5; outer += 2) {

  for (let inner = 0; inner < 6; inner += 2) {

    console.log(`${outer}-${inner}`);

  }

}

• 有两个变量； outer 和 inner 都用零值初始化。
• 每次迭代后，两个变量都递增 2
• 外循环和内循环各迭代三次。

循环控制语句

循环控制语句，有时称为“跳转语句”，会中断程序的正常流程。 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 及其框架/库中遇到的常见循环。 正如突出显示的那样，每种循环类型都有其用例和不同的行为。 如果您选择了错误的循环类型，您可能会遇到错误，并且您的代码可能会显示出意想不到的行为。

如果您正在处理 JavaScript 框架或库，请始终查看其文档并使用内置循环。