JavaScript for 循环：按索引遍历数组

JavaScript for loop 通过初始化、条件和更新这三个表达式，在可控次数内重复执行一段代码。需要循环索引时应使用它，例如访问数组位置、比较相邻元素或统计迭代次数。与 forEach 或 for...of 不同，经典的 JavaScript for 语句可以直接控制起点、终点和步长。

JavaScript For 循环数组迭代示例

输出：

步骤 0: 构建
步骤 1: 测试
步骤 2: 部署

这个示例如何工作

1. let i = 0 创建了一个块级作用域计数器，从数组的第一个索引开始。
2. i < tasks.length 会在每次迭代前检查条件。当 i 到达 tasks.length 时循环停止，避免越界读取。
3. i++ 会在每次迭代体执行完后递增计数器。
4. tasks[i] 读取索引 i 位置的元素，把每个值与它的索引配对输出。

< length（而不是 <=）是标准写法，因为数组索引范围是 0 到 length - 1。

JavaScript for 循环中的常见错误

把 <= 用成边界条件（off-by-one）

错误写法：

const items = ["a", "b", "c"];
for (let i = 0; i <= items.length; i++) {
  console.log(items[i]);
}

正确写法：

const items = ["a", "b", "c"];
for (let i = 0; i < items.length; i++) {
  console.log(items[i]);
}

<= 会多执行一次迭代，因此 items[items.length] 的结果是 undefined。

在异步回调中使用 var

错误写法：

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// 输出: 3, 3, 3

正确写法：

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

var 是函数作用域，因此回调读取到的是最终的 i。let 会为每次迭代创建新的绑定。

for 循环 vs for…of

默认优先使用 for...of；当你需要索引或非连续步进时，再切换到经典 for 循环。

更多示例

使用 break 提前退出：

const temps = [22, 18, 35, 29];
for (let i = 0; i < temps.length; i++) {
  if (temps[i] > 30) {
    console.log("首个高温日索引", i);
    break;
  }
}

break 会立即终止循环。不使用它时，即使已经找到第一个匹配项，循环仍会继续检查后续所有元素。

使用 continue 跳过迭代：

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

continue 会跳过当前迭代体剩余部分，但在下一次条件检查前仍会执行更新表达式（i++）。

FAQ

JavaScript for 循环的语法是什么？

JavaScript for 语句包含三个可选表达式：for (init; condition; update)。init 在循环开始前执行一次，condition 在每次迭代前求值，update 在每次迭代体后执行。三者都可省略；省略 condition 会创建无限循环，必须用 break 退出。

JavaScript while for loop：什么时候用哪个？

当初始化、条件和更新都围绕同一个计数器时，用 for 循环更合适，把它们写在一行里能直接看出循环边界。当退出条件依赖外部状态，或初始化与更新逻辑更适合放在循环体中时，使用 while。

如何提前停止 JavaScript for 循环？

在循环体内放置 break 语句。引擎执行到 break 时会立刻退出循环，并继续执行右花括号之后的代码。把 break 与条件结合，可以在找到目标值后立刻停止，避免不必要的迭代。