JavaScript 循环入门

想象一下，你有一个任务需要重复多次。例如，从 1 数到 10，处理一个商品列表，或者反复要求用户输入直到他们提供有效的响应。

如果为每一次重复都把相同的代码重写一遍，不仅效率极低，还容易出错。这就是循环 (Loop) 派上用场的地方。

在编程中，循环是一种控制流语句，它允许你重复执行一段代码，只要（或者直到）满足某个特定条件。循环是编写高效、动态程序的基础，让你无需进行繁琐的手动复制就能执行重复性操作。

1. for 循环：当你直到要循环多少次时

for 循环是 JavaScript 和许多其他编程语言中最常见的循环类型之一。当你确切知道希望循环迭代多少次，或者当你需要遍历一个有明确起点和终点的序列时，通常使用它。

1.1 for 循环的语法和结构

for 循环由圆括号内的三个可选表达式组成，表达式之间用分号分隔，后面跟着一个代码块：

for (初始化; 条件; 增量/减量) {
  // 每次迭代要执行的代码
}

让我们分解每个部分：

1. 初始化 (initialization): 这个表达式在循环开始时只执行一次。它通常用于声明和初始化循环计数器变量（例如 let i = 0;）。
2. 条件 (condition): 这个表达式在循环的每次迭代之前都会被评估。如果条件为 true，循环内的代码块就会执行。如果为 false，循环终止。
3. 增量/减量 (increment/decrement): 这个表达式在循环的每次迭代结束时（即代码块执行完后）执行。它通常用于更新循环计数器变量（例如 i++ 用于增加，i-- 用于减少）。

1.2 for 循环是如何工作的

这是循序渐进的过程：

1. 初始化： 初始化 表达式运行一次。
2. 条件检查： 评估 条件 表达式。
3. 执行代码块： 如果 条件 为 true，则执行循环花括号 {} 内的代码。
4. 增量/减量： 运行 增量/减量 表达式。
5. 重复： 过程回到第 2 步（条件检查），直到 条件 变为 false。

1.2 for 循环示例

1.2.1 示例 1：向上计数

假设你想打印从 1 到 5 的数字。

console.log("从 1 数到 5:");

for (let i = 1; i <= 5; i++) {
  // 初始化: let i = 1; (i 从 1 开始)
  // 条件: i <= 5; (只要 i 小于或等于 5 就继续循环)
  // 增量: i++; (每次迭代后 i 增加 1)
  console.log("当前数字: " + i);
}

// 输出:
// 从 1 数到 5:
// 当前数字: 1
// 当前数字: 2
// 当前数字: 3
// 当前数字: 4
// 当前数字: 5

在这个例子中：

• let i = 1; 将我们的计数器 i 初始化为 1。
• i <= 5;是条件。只要 i 是 5 或更小，循环就会继续。
• i++ 在每次循环体运行后将 i 增加 1。

1.2.2 示例 2：倒数计数

你也可以使用 for 循环向后计数。

console.log("\n从 5 倒数到 1:");

for (let j = 5; j >= 1; j--) {
  // 初始化: let j = 5; (j 从 5 开始)
  // 条件: j >= 1; (只要 j 大于或等于 1 就继续循环)
  // 减量: j--; (每次迭代后 j 减少 1)
  console.log("当前倒数: " + j);
}

// 输出:
// 从 5 倒数到 1:
// 当前倒数: 5
// 当前倒数: 4
// 当前倒数: 3
// 当前倒数: 2
// 当前倒数: 1

这里，我们将 j 从 5 开始，只要 j 大于等于 1 就循环，并且每一步都减少 j。

1.2.3 示例 3：计算总和

循环非常适合重复计算。让我们计算 1 到 10 的总和。

console.log("\n计算 1 到 10 的数字之和:");
let sum = 0; // 初始化一个变量来存储总和

for (let k = 1; k <= 10; k++) {
  // 在每次迭代中将 k 的当前值加到 sum 上
  sum = sum + k; // 这等同于 sum += k;
  console.log(`正在加上 ${k}, 现在总和是: ${sum}`);
}

console.log("最终总和: " + sum);

// 输出:
// 计算 1 到 10 的数字之和:
// 正在加上 1, 现在总和是: 1
// 正在加上 2, 现在总和是: 3
// ... (中间过程省略)
// 正在加上 10, 现在总和是: 55
// 最终总和: 55

这个例子展示了循环如何重复应用一个操作（sum = sum + k;）来获得更大的结果，这是编程中的常见模式。

1.3 for 循环的现实应用场景

• 处理固定数量的项目： 想象一个管理学生考试成绩的程序。如果你知道班里正好有 30 名学生，for 循环可以迭代 30 次来处理每个学生的分数，比如计算平均分或评级。
• 重复视觉动画： 在一个简单的游戏中，如果你想让角色向前走 5 步，可以使用 for 循环更新角色的位置 5 次，使其看起来在移动。

2. while 循环：只要条件为真就重复

while 循环是另一种基本的循环结构。与通常用于已知迭代次数的 for 循环不同，while 循环非常适合当你需要只要某个条件保持为真就重复代码块的情况。循环会一直持续到条件变为 false。

2.1 while 循环的语法和结构

while 循环的语法比 for 循环更简单：

while (条件) {
  // 只要条件为 true 就执行的代码
  // 关键：必须在循环内部更新与条件相关的变量
}

这里的 条件 和 if 语句或 for 循环中的 条件 一样工作。它的评估结果必须是布尔值（true 或 false）。

2.2 while 循环是如何工作的

1. 条件检查： 在每次迭代之前评估 条件 表达式。
2. 执行代码块： 如果 条件 为 true，则执行循环花括号 {} 内的代码。
3. 重复： 代码块执行后，过程回到第 1 步（条件检查）。这一直重复直到 条件 变为 false。
4. 终止： 当 条件 为 false 时，循环终止，程序继续执行 while 循环之后的代码。

关键点： 在 while 循环的代码块内部，必须有某种语句最终能让 条件 变为 false。如果条件永远不会变成 false，你就会创建一个死循环 (Infinite Loop)，这将导致你的程序冻结或崩溃。

2.3 while 循环示例

2.3.1 示例 1：简单的计数器（类似于 for 循环）

虽然对于已知迭代次数首选 for，但 while 也能做到。

console.log("\n使用 while 循环数到 3:");
let counter = 0; // 在循环外部初始化变量

while (counter < 3) {
  // 条件: 只要 counter 小于 3 就循环
  console.log("迭代次数 " + (counter + 1));
  counter++; // 重要: 增加计数器，以便最终使条件变为 false
}

// 输出:
// 使用 while 循环数到 3:
// 迭代次数 1
// 迭代次数 2
// 迭代次数 3

在这里，counter 是在循环之前初始化的。循环内部的 counter++ 确保 counter 最终达到 3，使 counter < 3 变为 false 并结束循环。

2.3.2 示例 2：模拟用户输入验证

这是 while 循环的经典用例。想象你需要用户输入特定的密码。

console.log("\n使用 while 循环模拟密码输入:");
let passwordAttempt = "";
const correctPassword = "open123";

// 只要尝试的密码不是正确密码，就继续循环
while (passwordAttempt !== correctPassword) {
  console.log("请输入密码:"); // 在真实的浏览器中，这可能是一个 prompt()
  
  // 为了演示，我们模拟几次错误的尝试，然后输入正确的
  if (passwordAttempt === "") {
    passwordAttempt = "wrongpass";
    console.log(`(模拟输入: ${passwordAttempt})`);
  } else if (passwordAttempt === "wrongpass") {
    passwordAttempt = "anotherfail";
    console.log(`(模拟输入: ${passwordAttempt})`);
  } else {
    passwordAttempt = correctPassword; // 几次尝试后模拟正确输入
    console.log(`(模拟输入: ${passwordAttempt})`);
  }
}

console.log("密码通过！欢迎！");

// 输出:
// 使用 while 循环模拟密码输入:
// 请输入密码:
// (模拟输入: wrongpass)
// 请输入密码:
// (模拟输入: anotherfail)
// 请输入密码:
// (模拟输入: open123)
// 密码通过！欢迎！

这个例子展示了 while 循环如何重复一个动作（询问密码），直到特定 条件 (passwordAttempt !== correctPassword) 变为 false。

2.4 while 循环的现实应用场景

• 游戏循环： 在许多简单的游戏中，有一个主 while 循环，只要玩家还有生命，或者只要游戏没有结束，它就会一直运行。在这个循环中，程序会处理玩家输入、更新游戏状态并重绘屏幕。
• 读取数据直到结束： 当从文件或网络流处理数据时，while 循环可能会只要还有更多数据可读就继续运行。当满足“文件结束”条件时，循环终止。

3. do...while 循环：总是至少运行一次

do...while 循环与 while 循环非常相似，但有一个重大区别：它的条件是在循环代码块执行之后评估的。这意味着 do...while 循环内的代码块保证至少执行一次，无论条件最初是 true 还是 false。

3.1 do...while 循环的语法和结构

do {
  // 这段代码至少会执行一次，
  // 然后只要条件为 true 就重复执行
} while (条件); // 注意这里的分号！

3.3 do...while 循环是如何工作的

1. 执行代码块： do 块内的代码执行一次。
2. 条件检查： 第一次执行后，评估 条件 表达式。
3. 重复： 如果 条件 为 true，过程回到第 1 步（执行代码块）。这一直重复直到 条件 变为 false。
4. 终止： 当 条件 为 false 时，循环终止。

3.4 do...while 循环示例

3.4.1 示例 1：简单的计数器

让我们把计数器例子改编为 do...while 循环。

console.log("\n使用 do...while 循环计数:");
let x = 0;

do {
  console.log("x 的当前值: " + x);
  x++; // 增加 x 以最终使条件变为 false
} while (x < 3); // 只要 x 小于 3 就循环

// 输出:
// 使用 do...while 循环计数:
// x 的当前值: 0
// x 的当前值: 1
// x 的当前值: 2

这与 while 循环的工作方式类似，但如果初始条件已经是 false，差异就会显现出来。

3.4.2 示例 2：确保至少执行一次操作

考虑这样一个场景：你想提示用户输入，并且你想确保提示至少显示一次，即使是以后的逻辑判断可能不需要它。

console.log("\n使用 do...while 模拟菜单选择:");
let userChoice;
let inputIndex = 0;
// 模拟输入序列
let simulatedInputs = ["invalid", "help", "exit"];

do {
  // 模拟用户输入逻辑
  if (inputIndex < simulatedInputs.length) {
    userChoice = simulatedInputs[inputIndex];
    inputIndex++;
    console.log(`(模拟用户输入: '${userChoice}')`);
  } else {
    userChoice = "exit";
  }

  if (userChoice === "exit") {
    console.log("正在退出程序。");
  } else if (userChoice === "help") {
    console.log("显示帮助信息...");
  } else {
    console.log("无效选择。请重试。");
  }

} while (userChoice !== "exit"); // 持续循环直到用户选择 "exit"

// 输出:
// 使用 do...while 模拟菜单选择:
// (模拟用户输入: 'invalid')
// 无效选择。请重试。
// (模拟用户输入: 'help')
// 显示帮助信息...
// (模拟用户输入: 'exit')
// 正在退出程序。

注意，即使 userChoice 最初没有值，代码块也会先执行一次，这使得 do...while 非常适合那些需要先执行操作，然后再决定是否重复的场景。

3.5 do...while 循环的现实应用场景

• 菜单驱动的程序： 在命令行应用程序中，你经常向用户展示一个选项菜单。do...while 循环确保菜单至少显示一次，然后持续显示直到用户选择“退出”。
• 安装向导： 想象一个软件安装向导。第一个屏幕（例如“欢迎”或“许可协议”）必须至少显示一次。之后，只要用户不断点击“下一步”且满足条件，循环就可以继续，直到点击“完成”。

4. 选择正确的循环

理解何时使用哪一种类型的循环是关键：

• for 循环： 当你预先知道迭代次数，或者有明确的起点、终点和步长时使用（例如：计数、遍历固定范围）。
• while 循环： 当你不知道确切的迭代次数，但你想只要某个条件保持为真就继续循环时使用。条件在循环体执行之前检查。
• do...while 循环： 当你需要至少执行一次循环体，然后只要条件保持为真就继续时使用。条件在循环体执行之后检查。