for 循环

讲解

循环让一段代码重复执行。最经典的是三段式 for：for (初始化; 条件; 每轮后执行)，比如 for (let i = 0; i < 10; i++) 从 0 数到 9。循环体内可以用 break 立即跳出整个循环，用 continue 跳过本轮直接进入下一轮。理解三段式的执行顺序很重要：初始化只跑一次，然后每轮「判断条件 → 执行循环体 → 执行 i++」。

遍历数组有更现代的方式：for...of 直接遍历元素（for (const item of items)），不用操心下标，是遍历数组的首选。注意区分 for...in——它遍历的是对象的键（字符串形式），用在数组上会得到下标字符串 '0'、'1'，还会带上原型链上的枚举属性，遍历数组不要用 for...in。需要下标时可以用数组的 entries()：for (const [i, item] of arr.entries())。

嵌套循环用于二维结构（表格、矩阵、坐标），内层循环完整跑完一轮，外层才前进一步。嵌套循环里 break 默认只跳出当前所在的那一层，要一次性跳出多层可以给外层循环打标签（label），写 break 标签名——这个语法冷门但关键时刻好用。

示例

// 三段式 for：累加 1 到 100
let sum = 0;
for (let i = 1; i <= 100; i++) {
  sum += i;
}
console.log('1 到 100 的和：', sum);

// for...of 遍历数组元素（首选）
const fruits = ['苹果', '香蕉', '橙子'];
for (const fruit of fruits) {
  console.log('水果：', fruit);
}

// 需要下标时用 entries()
for (const [index, fruit] of fruits.entries()) {
  console.log(index, fruit);
}

// break 与 continue
for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) continue; // 跳过偶数
  if (i > 5) break; // 大于 5 就停
  console.log('奇数：', i); // 只打印 1, 3, 5
}

// for...in 遍历的是键，适合对象不适合数组
const user = { name: '小明', age: 18 };
for (const key in user) {
  console.log('键：', key, '值：', user[key]);
}

常见坑

• 用 for...in 遍历数组：拿到的是字符串下标 '0'、'1'，做 i + 1 会得到 '01'。遍历数组用 for...of。
• 循环条件写成 <= length：for (let i = 0; i <= arr.length; i++) 最后一轮 i 越界，arr[i] 是 undefined。正确是 i < arr.length。
• 在 for 头部用 var：var 声明的循环变量没有块级作用域，循环里的异步回调共享同一个变量，全部读到最终值。用 let 每轮创建新绑定。
• 在循环里重复计算长度其实是小优化点，但真正的坑是边遍历边删除数组元素导致跳项——删除请改用 filter。

小结

三段式 for 精确控制次数，for...of 遍历数组元素，for...in 只用于对象键。break 跳出、continue 跳过。下一节看另一种循环：while。