每个JavaScript循环类型解释：[带有代码块和示例]

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

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

为了更好地理解它，你可以将其视为一款电脑游戏，你被指示向北走x步，然后向左走y步。

你可以表示“向北走7步”为：

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

  // 重复7次，步骤的值为0到6。

  console.log("向北走一步");

}

当上述代码块被执行时，你会得到：

为什么循环通常被使用？

• 执行重复任务：你可以使用循环执行指令，直到满足某些条件为止。
• 迭代对象或数组：使用循环，你可以迭代对象的属性或数组的元素，从而为每个属性或元素执行某些操作。
• 筛选数据：你可以使用循环根据特定条件筛选数据。

javascript循环有不同的形式：for循环、while循环、do…while循环、for…of循环和for…in循环。让我们详细了解它们，并演示每个循环的工作原理。

for循环

for循环将重复执行，直到指定的条件评估为true。for循环有三个可选表达式，后面跟着一个代码块。

for (初始化; 条件; 最终表达式) {

  // 代码

}

• 初始化表达式在第一次循环执行之前执行。这个表达式通常用于初始化一个或多个计数器。
• 条件表达式在每次for循环运行之前进行检查。当表达式评估为true时，循环或语句中的代码会每次执行一次。另一方面，当表达式评估为false时，循环停止。然而，如果省略了表达式，表达式将自动评估为true。
• 最终表达式在每次循环迭代之后执行。这个表达式通常用于递增一个计数器。

你可以使用{}块语句来组合和执行多个语句。如果你想在条件表达式评估为false之前提前退出循环，请使用break语句。

带有代码的for循环示例

1. 使用for循环迭代：

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

  console.log(i);

}

在这个代码块中：

• 变量i被初始化为零（let i=0）。
• 条件是i应该小于7（i<7）。
• 如果i的值小于7（i<7），循环将重复迭代。
• 每次迭代后，迭代会将1添加到i的值中（++1）。

1. 使用break语句在条件评估为false之前退出循环：

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

  if (i === 9) {

    break;

  }

  console.log('总开发者数量：' + i);

}

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

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

(image)

for…of循环

for…of循环用于迭代可迭代对象，例如map、array、arguments和set。该循环会调用一个自定义的迭代挂钩，其中包含执行每个不同属性的值的语句。

for…循环的基本结构为：

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"和“react”。
• for…of循环遍历frontendlanguages中的每个元素。
• 代码块中的i在每次迭代期间都会获得每个元素的值，并在控制台上打印出这些值。

1. for…of循环遍历一个set

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。

1. 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()方法向map对象添加五个键值对。
• for…of循环遍历map对象m的元素。

for…in循环

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);

}

在这段代码中：

• 我们创建一个名为shoppinglist的javascript对象。
• 我们使用for循环使用in运算符迭代shoppinglist上的每个属性。
• 在每次迭代中，循环将当前属性名称分配给shoppinglist。

while循环

while循环会评估一个条件，如果它发现条件为true，则执行代码块。然而，如果条件为false，则循环结束，代码块将不会执行。

这是一个while循环的基本结构：

 

while (condition)

    statement

在执行循环中的语句之前，必须先进行测试条件。您可以使用{}或块语句来执行多个语句。

while循环示例

let n = 0;

while (n < 9) {

  console.log(n);

  n++;

}

在这段代码中：

• 一个变量n被初始化为零（let n=0）。
• 只要n的值小于9（n<9），循环将执行。
• 每次迭代时，n的值将显示在控制台上，并在每次迭代后增加1（n++）。
• 代码将在8时停止执行。

do...while循环

do...while循环会迭代直到特定条件评估为false为止。

do...while语句的一般结构如下：

do

  statement

while (condition);

语句在检查条件之前执行一次。如果condition为true，则执行该语句。然而，如果评估的condition为false，则停止执行，并将控制传递给do...while后面的语句。do...while循环中的代码保证至少执行一次，即使条件评估为true。

do...while示例

let n = 0;

do {

  n += 1;

  console.log(n);

} while (n < 7);

在这段代码中：

• 我们介绍了一个变量n，并将其初始值设置为0（let n=0）。
• 我们的变量n进入了一个do…while循环，其中它的值在每次迭代后增加1（n+=1）。
• 将记录n的值。
• 只要n的值小于7（n<7），循环将继续执行。

当您运行此代码时，控制台将显示从1到7的n的值，因为循环执行了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，并且都被初始化为0。
• 每次迭代后，两个变量都增加2。
• outer和inner循环均会迭代三次。

循环控制语句

循环控制语句，有时也称为“跳转语句”，可以中断程序的正常流程。 break和continue就是循环控制语句的例子。

break语句

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

for (let n = 1; n <= 26; n++) {

  if (n === 13) {

    console.log("循环在此终止。我们已经达到了break语句");

    break;

  }

  console.log(n);

}

渲染后的代码将显示为：

continue语句

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

for (let n = 0; n <= 10; n++) {

  if (n === 5) {

    continue;

  }

  console.log(n);

}

渲染后的代码将显示为：

结论

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

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