JavaScript 教程：深入理解 while 和 for 循环

JavaScript 教程：深入理解 while 和 for 循环

en.javascript.info Modern JavaScript Tutorial 项目地址: https://gitcode.com/gh_mirrors/en/en.javascript.info

循环是编程中最基础也是最重要的概念之一。在 JavaScript 中，我们主要使用 while 和 for 循环来重复执行代码块。本文将全面解析这两种循环结构，帮助你掌握它们的用法和适用场景。

为什么需要循环？

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

• 遍历数组或列表中的每个元素
• 重复执行某段代码直到满足特定条件
• 批量处理数据

循环就是为了解决这类重复性任务而设计的控制结构。

while 循环详解

while 循环是最基本的循环结构，语法如下：

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

工作原理

1. 首先评估条件表达式
2. 如果结果为真（truthy），执行循环体
3. 重复上述过程，直到条件变为假（falsy）

示例代码

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

注意事项

• 循环条件可以是任何表达式，最终会被转换为布尔值
• 必须确保循环条件最终会变为假，否则会形成无限循环
• 单行循环体可以省略大括号，但不推荐这样做

do...while 循环

do...while 循环是 while 循环的变体，区别在于它先执行循环体，再检查条件。

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

特点

• 循环体至少会执行一次
• 适用于需要先执行操作再检查条件的场景

示例

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

for 循环详解

for 循环是最常用的循环结构，语法更加紧凑：

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

组成部分

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

执行流程

1. 执行初始化语句
2. 检查条件 → 如果为真：
   • 执行循环体
   • 执行步进表达式
3. 重复步骤2，直到条件为假

示例

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

灵活用法

for 循环的三个部分都可以省略：

• 省略初始化：如果变量已在外部声明
• 省略步进表达式：需要在循环体内手动更新
• 省略所有部分：创建无限循环 for (;;)

循环控制语句

break 语句

立即终止整个循环，继续执行循环后的代码。

while (true) {
  let input = prompt("输入内容");
  if (!input) break; // 空输入时退出循环
  console.log(input);
}

continue 语句

跳过当前迭代，直接进入下一次循环。

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

循环标签

JavaScript 支持为循环添加标签，用于在嵌套循环中精确控制流程。

语法

outerLoop: for (...) {
  innerLoop: for (...) {
    if (condition) break outerLoop; // 直接跳出外层循环
  }
}

使用场景

当需要从多层嵌套循环中直接退出时，标签非常有用。

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. 遍历数组/可迭代对象：考虑使用 for...of（不在本文讨论范围）

常见陷阱与最佳实践

1. 无限循环：确保循环条件最终会变为假
2. 变量作用域：for 循环中使用 let 声明变量可限制作用域
3. 性能优化：避免在循环条件中进行复杂计算
4. 代码可读性：复杂的循环逻辑考虑使用函数封装

通过掌握这些循环结构，你将能够处理 JavaScript 中大多数需要重复执行的场景。记住，选择哪种循环取决于具体需求和代码的可读性。

en.javascript.info Modern JavaScript Tutorial 项目地址: https://gitcode.com/gh_mirrors/en/en.javascript.info