白骑士的JavaScript教学语法基础篇之流程控制 2.3.2 循环语句（for, while, do...while）

        JavaScript 是一种功能强大、灵活的编程语言，它为开发者提供了多种控制结构来高效地处理数据。在 JavaScript 中，循环语句是控制代码重复执行的核心工具，可以让我们在满足特定条件时多次执行一段代码。本文将深入讲解三种常见的循环语句：‘for‘、‘while‘ 和 ‘do...while‘，并结合多个实例详细说明它们的使用场景和工作原理。

循环语句的基本概念

        循环语句用于重复执行一段代码，直到某个条件不再满足。它能减少冗余代码，并使操作更为简洁。主要的三种循环语句有：

• ‘for‘ 循环：预知循环次数时使用。
• ‘while‘ 循环：在条件为真时执行。
• ‘do...while‘ 循环：先执行后判断，保证至少执行一次。

        下面我们详细了解这三种循环的语法和使用。

‘for‘ 循环

基本 ‘for‘ 循环

        ‘for‘ 循环是最常用的循环语句之一，特别适合在知道循环次数的情况下使用。它由三个部分组成：

• 初始表达式：通常用于初始化循环变量。
• 条件表达式：在每次循环迭代前检查，如果结果为 ‘true‘，则继续循环；否则退出循环。
• 更新表达式：每次循环后更新循环变量。

语法

for (初始化; 条件; 更新) {
    // 要执行的代码
}

示例

// 输出 0 到 4
for (let i = 0; i < 5; i++) {
    console.log(i);
}

解释

• ‘let i = 0;‘ 初始化循环变量 ‘i‘ 并赋值为 0。
• ‘i < 5‘ 判断条件，若 ‘i‘ 小于 5，继续循环。
• ‘i++‘ 每次迭代时，‘i‘ 的值加 1。

嵌套 ‘for‘ 循环：

        ‘for‘ 循环可以嵌套使用，特别适合处理多维数组或矩阵问题。

// 输出乘法表
for (let i = 1; i <= 9; i++) {
    for (let j = 1; j <= 9; j++) {
        console.log(‘${i} x ${j} = ${i * j}‘);
    }
}

        在上述例子中，内层循环在每次外层循环运行时都会执行一遍。

‘while‘ 循环

基本 ‘while‘ 循环

        ‘while‘ 循环用于在条件为 ‘true‘ 时反复执行代码，适合用于循环次数不确定的情况下。

语法

while (条件) {
    // 要执行的代码
}

示例

// 打印 0 到 4
let i = 0;

while (i < 5) {
    console.log(i);
    i++;
}

解释

• ‘i = 0‘ 初始化变量 ‘i‘。
• ‘while (i < 5)‘：只要 ‘i‘ 小于 5，循环就会继续执行。
• 每次循环结束后，‘i++‘ 使 ‘i‘ 自增 1。

无限循环

        如果条件永远为 ‘true‘，‘while‘ 循环就会变成无限循环，通常应避免这种情况。

while (true) {
    console.log("这是一个无限循环！");
}

        在大多数情况下，应确保循环条件在某个时刻会变为 ‘false‘，以避免程序卡死。

‘do...while‘ 循环

基本 ‘do...while‘ 循环

        ‘do...while‘ 循环与 ‘while‘ 循环类似，唯一的区别是它先执行代码，然后再检查条件。这意味着即使条件一开始是 ‘false‘，代码也会至少执行一次。

语法

do {
    // 要执行的代码
} while (条件);

示例

let i = 0;

do {
    console.log(i);
    i++;
} while (i < 5);

解释

        ‘do‘ 代码块会先执行，然后 ‘while‘ 语句会检查条件是否为 ‘true‘，如果为 ‘true‘ 则继续循环。

场景：保证代码至少执行一次

        ‘do...while‘ 循环适合在我们希望某段代码至少执行一次的场景中使用。比如，要求用户输入一个合法值，至少提示一次，然后根据输入决定是否重复提示。

let password;

do {
    password = prompt("请输入密码：");
} while (password !== "123456");

alert("密码正确！");

循环控制语句

        在使用循环时，JavaScript 提供了几个关键字来更好地控制循环的执行：

• ‘break‘：立即退出循环，不再执行循环体。
• ‘continue‘：跳过当前迭代，继续下一次循环。

‘break‘ 示例

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break;  // 当 i 等于 5 时，退出循环
    }

    console.log(i);
}

输出结果

0
1
2
3
4

‘continue‘ 示例

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        continue;  // 跳过 i 等于 5 的这次迭代
    }

    console.log(i);
}

输出结果

0
1
2
3
4
6
7
8
9

总结

        在 JavaScript 中，选择合适的循环结构可以提高代码的可读性和效率。一般而言：

• ‘for‘ 循环适合在明确知道循环次数时使用。
• ‘while‘ 循环适合条件驱动的循环，不确定循环次数时使用。
• ‘do...while‘ 循环保证至少执行一次代码块，适合需要先执行后判断的场景。

        掌握这些循环语句并灵活应用它们，将帮助你在开发过程中更有效地处理大量数据和重复任务。希望这篇博客能够帮助你更好地理解和使用 JavaScript 中的循环语句！如果你有任何问题或需要进一步的解释，欢迎随时提出！