JavaScript 循环结构详解：while 和 for 循环

JavaScript 循环结构详解：while 和 for 循环

ru.javascript.info Современный учебник JavaScript 项目地址: https://gitcode.com/gh_mirrors/ru/ru.javascript.info

循环是编程中最基础也最重要的概念之一，它允许我们重复执行某段代码。在 JavaScript 中，主要有三种循环结构：while、do..while 和 for。本文将深入解析这些循环的工作原理和使用场景。

为什么需要循环？

在实际开发中，我们经常需要重复执行某些操作。例如：

• 显示列表中的所有商品
• 对数组中的每个元素进行处理
• 从 1 数到 100 并执行某些计算

手动重复编写相同代码显然不现实，这时候循环结构就派上用场了。

while 循环

while 循环是最基本的循环形式，语法如下：

while (条件) {
  // 循环体代码
}

工作原理：

1. 检查条件是否为真
2. 如果为真，执行循环体代码
3. 重复步骤1-2，直到条件为假

示例：

let i = 0;
while (i < 3) {
  console.log(i); // 依次输出 0, 1, 2
  i++;
}

注意事项：

• 如果条件始终为真，循环将无限执行（死循环）
• 循环体只有一条语句时，可以省略大括号（但不推荐）

do..while 循环

do..while 循环是 while 循环的变体，语法如下：

do {
  // 循环体代码
} while (条件);

与 while 的区别：

• do..while 先执行循环体，再检查条件
• 这意味着循环体至少会执行一次

示例：

let i = 0;
do {
  console.log(i); // 先输出0，然后1，最后2
  i++;
} while (i < 3);

for 循环

for 循环是最常用的循环结构，语法如下：

for (初始化; 条件; 步进) {
  // 循环体代码
}

组成部分：

1. 初始化：循环开始时执行一次（通常用于声明计数器）
2. 条件：每次迭代前检查，为真则继续循环
3. 步进：每次迭代后执行（通常用于更新计数器）

示例：

for (let i = 0; i < 3; i++) {
  console.log(i); // 输出 0, 1, 2
}

灵活用法：

• 可以省略任何部分（但分号必须保留）
• 例如创建无限循环：for (;;) { ... }

循环控制语句

break 语句

break 用于立即退出整个循环：

let sum = 0;
while (true) {
  let value = +prompt("输入数字", "");
  if (!value) break; // 如果输入为空，退出循环
  sum += value;
}
alert(`总和: ${sum}`);

continue 语句

continue 用于跳过当前迭代，直接进入下一次循环：

for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) continue; // 跳过偶数
  console.log(i); // 只输出奇数
}

循环标签

对于嵌套循环，可以使用标签来指定要中断或继续的循环：

outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    let input = prompt(`坐标值 (${i},${j})`, "");
    if (!input) break outer; // 同时退出两个循环
  }
}

循环选择指南

1. 已知迭代次数：使用 for 循环
2. 条件检查优先：使用 while 循环
3. 至少执行一次：使用 do..while 循环
4. 需要提前退出：使用 break
5. 跳过当前迭代：使用 continue

常见错误

1. 忘记更新计数器：导致无限循环

   let i = 0;
   while (i < 10) {
     console.log(i);
     // 忘记 i++
   }
   

2. 错误的条件判断：可能导致循环不执行或无限执行

   for (let i = 10; i > 0; i++) { // 条件永远成立
     console.log(i);
   }
   

3. 在 for 循环中重复声明变量：

   for (let i = 0; i < 5; i++) {
     let i = 10; // 遮蔽了外部的i
     console.log(i); // 总是输出10
   }
   

掌握这些循环结构是成为 JavaScript 开发者的基础。理解它们的工作原理和适用场景，能够帮助你编写更高效、更清晰的代码。

ru.javascript.info Современный учебник JavaScript 项目地址: https://gitcode.com/gh_mirrors/ru/ru.javascript.info