15 JavaScript学习：循环-编程知识

JavaScript循环语句概念和分类

在这里插入图片描述

JavaScript中的循环语句用于重复执行特定的代码块，直到指定的条件不再满足。下面是JavaScript中常用的循环语句以及它们的概念和分类：

for 循环：for循环通过指定起始条件、循环条件和递增/递减步长来进行迭代。它适用于已知迭代次数的情况。
```
for (let i = 0; i < 5; i++) {// 执行代码块
}
```
while 循环：while循环在每次迭代之前检查循环条件。只有当条件为真时，循环体内的代码才会执行。它适用于不确定迭代次数的情况。
```
while (condition) {// 执行代码块
}
```
do…while 循环：与while循环类似，不同之处在于do…while循环会先执行一次代码块，然后再检查循环条件是否满足。它确保循环体内的代码至少被执行一次。
```
do {// 执行代码块
} while (condition);
```
for…in 循环：for…in循环用于遍历对象的可枚举属性，对数组来说也可以使用，但不推荐。
```
for (let key in object) {// 执行代码块
}
```
for…of 循环：for…of循环用于遍历可迭代对象（如数组、字符串、Map、Set等）的元素。
```
for (let element of iterable) {// 执行代码块
}
```

循环语句的选择取决于具体的需求和情况。通常来说，for循环适用于已知迭代次数的情况，while和do…while适用于不确定迭代次数的情况，而for…in和for…of适用于遍历集合或对象的情况。

while循环

在这里插入图片描述

在JavaScript中，while循环是一种常用的循环语句，适用于当条件为真时重复执行代码块。while循环的结构如下：

while (condition) {// 执行代码块
}

首先，判断condition是否为真（即条件是否满足）。
如果条件为真，则执行循环体内的代码块。
执行完毕后再次检查条件，如果仍然为真，则继续重复以上步骤直至条件为假。

以下是一个简单的示例，展示了如何使用while循环来计算1到5的和：

let sum = 0;
let i = 1;while (i <= 5) {sum += i;i++;
}console.log(sum); // 输出：15

在这个示例中，我们初始化变量sum为0，变量i为1。然后通过while循环，每次迭代将i加到sum中，并递增i，直到i超过5时循环结束。最终输出的结果为1到5的和为15。

需要注意的是，在使用while循环时需要小心避免无限循环，即条件永远为真导致循环无法停止。确保在循环体内有递增或递减的步骤，以让条件在某个时刻变为假。

do…while循环

do...while 循环是 JavaScript 中的另一种常见循环语句，它与 while 循环类似，但有一个关键区别：do...while 循环会先执行一次代码块，然后再检查循环条件是否满足。这确保了循环体内的代码至少被执行一次。do...while 循环的结构如下：

do {// 执行代码块
} while (condition);

首先，执行循环体内的代码块。
执行完毕后，检查 condition 是否为真。
如果条件为真，则继续重复执行循环体内的代码块。
如果条件为假，则循环结束。

以下是一个简单的示例，演示了如何使用 do...while 循环来计算1到5的和：

let sum = 0;
let i = 1;do {sum += i;i++;
} while (i <= 5);console.log(sum); // 输出：15

在这个示例中，无论条件是否满足，循环体内的代码块至少会执行一次。然后，通过检查条件 i <= 5，确定是否继续执行循环。

do...while 循环通常用于需要至少执行一次循环体内代码的情况，然后根据条件决定是否继续执行。与 while 循环相比，do...while 循环在执行循环体前先检查条件，因此即使条件一开始就不满足，循环体也会执行一次。

for…i循环

for 循环是 JavaScript 中最常用的循环语句之一，它允许在一定次数的循环中重复执行代码块。for 循环的结构如下：

for (initialization; condition; iteration) {// 执行代码块
}

initialization：在循环开始前执行的表达式，通常用于初始化计数器或者声明变量。
condition：在每次循环迭代前被求值的表达式。如果该表达式的值为 true，则继续循环；如果为 false，则退出循环。
iteration：在每次循环之后执行的表达式，通常用于递增或递减计数器。

以下是一个简单的示例，演示了如何使用 for 循环来计算1到5的和：

let sum = 0;for (let i = 1; i <= 5; i++) {sum += i;
}console.log(sum); // 输出：15

在这个示例中，for 循环首先初始化变量 i 为1，然后在每次循环迭代时检查 i <= 5 是否为真，如果为真则执行循环体内的代码块，并递增 i。当 i 超过5时，循环结束。

for 循环通常用于已知循环次数的情况下，因为其结构明确地指定了初始化、条件和迭代步骤。相比之下，while 和 do...while 循环更适合在条件为真时重复执行代码块，或者在需要至少执行一次循环体的情况下使用。

for…in循环

for...in 循环是 JavaScript 中用于遍历对象属性的一种循环语句。它会枚举对象的可枚举属性，并对每个属性执行指定的代码块。for...in 循环的结构如下：

for (variable in object) {// 执行代码块
}

variable：在每次循环迭代中，将会赋值为当前属性的名称。
object：要遍历的对象。

以下是一个简单的示例，演示了如何使用 for...in 循环遍历对象的属性：

let person = {name: 'Alice',age: 30,gender: 'female'
};for (let key in person) {console.log(key + ': ' + person[key]);
}

在这个示例中，for...in 循环遍历了 person 对象的所有属性，对每个属性执行了一段代码，输出了属性名和属性值。

需要注意的是，for...in 循环不仅会遍历对象自身的可枚举属性，还会遍历对象的原型链上的可枚举属性。因此，在使用 for...in 循环时，通常需要通过 hasOwnProperty 方法来检查属性是否是对象自身的属性，以避免遍历到继承的属性。

for...in 循环通常用于遍历对象的属性，特别是在处理未知数量的属性时非常实用。但在遍历数组时，推荐使用传统的 for 循环或者 forEach 方法。

for…of循环

for...of 循环是 JavaScript 中用于遍历可迭代对象的一种循环语句。它可以遍历数组、字符串、Map、Set 等可迭代对象，并对每个元素执行指定的代码块。for...of 循环的结构如下：for (variable of iterable) {// 执行代码块
}- `variable`：在每次循环迭代中，将会赋值为当前元素的值。
- `iterable`：要遍历的可迭代对象。以下是一个简单的示例，演示了如何使用 for...of 循环遍历数组：let arr = [1, 2, 3, 4, 5];for (let element of arr) {console.log(element);
}在这个示例中，for...of 循环遍历了数组 arr 的所有元素，并对每个元素执行了一段代码，输出了数组中的每个元素的值。需要注意的是，for...of 循环只能遍历可迭代对象的值，而不能直接访问对象的键。如果需要遍历对象的键值对，可以使用 for...in 循环或者 Object.entries 方法。for...of 循环通常用于遍历数组或其他可迭代对象的值，相比传统的 for 循环，它的语法更加简洁清晰，并且可以避免下标的管理。但需要注意的是，for...of 循环无法遍历普通的对象，因为普通对象不是可迭代的。

比较continue和break

continue 和 break 是两种常用的控制流程的语句，它们用于在循环中进行条件控制和流程控制。

continue语句：
- 当 continue 语句执行时，它会立即停止当前循环的迭代，并跳到下一次迭代。
- 在 for、while 或 do...while 循环中，当 continue 语句执行时，循环会跳过当前迭代中的剩余代码，并开始下一次迭代。
- continue 主要用于在不满足特定条件时跳过当前循环迭代，继续执行下一次迭代。
- 通常用于处理特定条件下的特殊情况，或者遍历数组、对象等数据结构时跳过某些元素的处理。
break语句：
- 当 break 语句执行时，它会立即终止当前所在的循环，并跳出该循环的执行流程，继续执行循环后面的代码。
- 在 for、while 或 do...while 循环中，当 break 语句执行时，循环会立即停止执行，程序流程会跳出该循环，执行循环后面的代码。
- break 主要用于在满足某些条件时立即终止循环的执行，提前跳出循环。
- 通常用于在搜索特定条件或达到特定情况时停止循环，或者遍历数组、对象等数据结构时满足某个条件就终止循环。

比较：

continue 用于跳过当前迭代，继续执行下一次迭代；而 break 用于立即终止当前循环，跳出循环体。
continue 适用于特定条件下需要跳过某些迭代的情况，而 break 适用于需要提前结束整个循环的情况。
在某些情况下，continue 和 break 可以结合使用，根据不同的条件进行不同的控制流程。

比较for和while

for 和 while 是 JavaScript 中两种常见的循环结构，它们都用于重复执行一段代码，但在语法和使用上有一些区别。

for 循环：
- for 循环通常用于已知循环次数的情况，它的语法结构包括初始化、条件判断和迭代器。
- 语法结构：
```
for (初始化; 条件判断; 迭代器) {// 执行代码块
}
```
- 初始化：循环开始前执行的语句，通常用于初始化计数器或设置初始条件。
- 条件判断：在每次迭代开始前都会检查的条件，如果条件为真，则继续执行循环体内的代码块；如果条件为假，则结束循环。
- 迭代器：在每次迭代结束后执行的语句，通常用于更新计数器或迭代器变量。
while 循环：
- while 循环用于在条件为真时重复执行一段代码，它的语法结构只包括条件判断。
- 语法结构：
```
while (条件判断) {// 执行代码块
}
```
- 条件判断：在每次迭代开始前都会检查的条件，如果条件为真，则继续执行循环体内的代码块；如果条件为假，则结束循环。