理解 JavaScript 中的循环和迭代

JavaScript 中有多种循环方式可以有效地管理重复操作。通过学习这些循环，您可以提高编码技能，无论您是迭代数组、对象还是只是再次运行代码块。

我们将在本博客中介绍 JavaScript 循环和迭代语句：

for 语句

do...while 语句

while 语句

for...in 语句

for...of 语句

break 语句

continue 语句

📖 JavaScript 循环简介

循环是一种 JavaScript 结构，允许您根据特定条件**重复一段代码**。这可以消除冗余、提高可读性并使代码动态化。

例如，假设您要打印数字 1-10。如果没有循环，您必须手动创建十个 `console.log` 语句。如果使用循环，只需几行代码！

**1️⃣ 声明**

`for` 循环是最广泛使用的循环之一。它按特定次数执行一段代码。

⭐ 语法：

for (initialization; condition; increment/decrement) {
    // code to execute
}

📌示例：打印从 1 到 5 的数字

for(let var1 = 1; var1 <= 5; var1++){
    console.log('Iteration number '+ var1)
}
/* Output:
Iteration number 1
Iteration number 2
Iteration number 3
Iteration number 4
Iteration number 5 */

**2️⃣ while 语句**

`while` 循环在执行代码块之前验证条件。当您不知道循环将执行多少次时，它很有用。只要提供的条件为真，它就会继续执行。如果条件变为假，则循环终止。

⭐ 语法：

while (condition) {
    // code to execute
}

📌示例：打印从 1 到 5 的数字

let var2 = 1
while(var2 <= 5){
    console.log('Iteration number '+ var2)
    var2++
}
/* Output:
Iteration number 1
Iteration number 2
Iteration number 3
Iteration number 4
Iteration number 5 */

**3️⃣ do...while 语句**

“do...while”循环会至少运行一次代码块，无论条件是否为假。当您想确保代码块至少运行一次（无论条件如何）时，此循环非常有用。

⭐ 语法：

do {
    // code to execute
} while (condition);

📌 示例 1：打印从 1 到 5 的数字

let var3 = 1
do {
    console.log('Iteration number '+ var3)
    var3++
}while(var3 <= 5)
/* Output:
Iteration number 1
Iteration number 2
Iteration number 3
Iteration number 4
Iteration number 5 */

📌 示例 2：代码块至少运行一次

let var4 = 6
do {
    console.log('Iteration number '+ var4)
    var4++
}while(var4 <= 5)
/* Output:
Iteration number 6 */

**4️⃣ for...in 语句**

`for...in` 循环遍历对象的键。它通常用于对象，但也可以遍历数组索引。

⭐ 语法：

for (key in object) {
    // code to execute
}

📌示例：遍历对象的属性

const user = { name: "Richa", age: 25, role: "Developer" };
for (let key in user) {
    console.log(`${key}: ${user[key]}`);
}
/* Output:
name: Richa
age: 25
role: Developer */

**5️⃣ for...of 声明**

`for...of` 循环可迭代数组、字符串、Map 和 Set 等可迭代对象。当您想要迭代可迭代对象的所有元素而又不必管理索引或使用对象的属性时，此循环非常有用。

⭐ 语法：

for (element of iterable) {
    // code to execute
}

📌示例：遍历数组

const numArray = [1,2,3,4,5]
for(const num of numArray){
    console.log('Iteration number '+ num)
}
/* Output:
Iteration number 1
Iteration number 2
Iteration number 3
Iteration number 4
Iteration number 5 */

**6️⃣ break 语句**

当满足某个条件时，“break”语句强制循环立即退出。

📌示例：当 i 等于 3 时停止循环

for (let i = 1; i <= 5; i++) {
    if (i === 3) break;
    console.log("Iteration number "+i);
}
/* Output:
Iteration number 1
Iteration number 2 */

**7️⃣ continue 语句**

`continue` 语句跳过当前迭代并跳转到下一个迭代。

📌示例：跳过数字 3

for (let i = 1; i <= 5; i++) {
    if (i === 3) continue;
    console.log("Iteration number "+i);
}
/* Output:
Iteration number 1
Iteration number 2
Iteration number 4
Iteration number 5 */

结论

理解和掌握循环对于有效处理复杂问题至关重要。虽然 for、while 和 do...while 等基本循环必不可少，但如今 for...of 和 for...in 循环在处理对象和数组时提供了更大的灵活性。要控制循环流程，请记住谨慎使用 break 和 continue。

编码愉快！✨

CLIS.CC

理解 JavaScript 中的循环和迭代

📖 JavaScript 循环简介

结论