每个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循环示例
- 使用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）。
- 使用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)
statementfor…of循环的示例
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在每次迭代期间都会获得每个元素的值，并在控制台上打印出这些值。
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。
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框架或库，请始终查阅其文档并使用内置的循环。
