JavaScript 循环

循环让你重复执行一段代码——遍历数组的每个元素、处理一组数据、或者等待某个条件满足。

for 循环

最经典的循环形式，三部分定义循环逻辑：

javascript 
for (let i = 0; i < 5; i++) {
  console.log(`第 ${i + 1} 次循环`);
}
// 输出 5 行：第 1 次循环 ... 第 5 次循环

三个表达式的含义：

部分表达式执行时机
初始化let i = 0循环开始前执行一次
条件i < 5每次迭代前检查，false 则终止
更新i++每次迭代结束后执行

遍历数组

javascript 
const fruits = ['苹果', '香蕉', '橘子'];

for (let i = 0; i < fruits.length; i++) {
  console.log(`${i}: ${fruits[i]}`);
}
// 0: 苹果  1: 香蕉  2: 橘子

反向遍历

javascript 
for (let i = fruits.length - 1; i >= 0; i--) {
  console.log(fruits[i]);
}
// 橘子  香蕉  苹果

while 循环

在每次迭代前检查条件，条件为真时执行：

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

while 适合当循环次数不可预知时：

javascript 
// 模拟掷骰子直到掷出 6
let roll;
while (roll !== 6) {
  roll = Math.floor(Math.random() * 6) + 1;
  console.log(`掷出：${roll}`);
}

do...while 循环

与 while 的唯一区别：至少执行一次，因为条件在循环体之后检查：

javascript 
let count = 0;
do {
  console.log(count);
  count++;
} while (count < 3);

// 即使条件一开始就是 false，也会执行一次
do {
  console.log('至少执行一次');
} while (false);

for...of — 遍历值（推荐）

ES6 引入的循环，直接遍历数组的值，不需要索引：

javascript 
const items = ['A', 'B', 'C'];

for (const item of items) {
  console.log(item);
}
// A  B  C

for...of 语法简洁、意图清晰，遍历数组时优先使用。

需要索引时用 entries()

javascript 
for (const [index, item] of items.entries()) {
  console.log(`${index}: ${item}`);
}
// 0: A  1: B  2: C

for...in — 遍历对象属性

for...in 遍历对象的可枚举属性名：

javascript 
const user = { name: '张三', age: 25, city: '上海' };

for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}
// name: 张三  age: 25  city: 上海

for...in 会遍历原型链上的属性（除非用 hasOwnProperty 过滤）。遍历数组时用 for...of，遍历对象属性时用 for...in（或 Object.keys()）。

break 和 continue

  • break — 立即终止整个循环
  • continue — 跳过当前迭代，进入下一次
javascript 
// break：找到目标后停止
const numbers = [1, 3, 5, 7, 8, 9, 11];
let firstEven = null;

for (const num of numbers) {
  if (num % 2 === 0) {
    firstEven = num;
    break; // 找到就停
  }
}
console.log(firstEven); // 8

// continue：跳过特定元素
for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) continue; // 跳过偶数
  console.log(i); // 1 3 5 7 9
}

循环选择指南

场景推荐写法
遍历数组值for...of
需要索引遍历数组arr.forEach() 或 for (const [i, v] of arr.entries())
遍历对象属性Object.keys() + for...of 或 for...in
已知次数for 循环
未知次数（条件驱动）while
至少执行一次do...while
提前终止for / for...of + break

避免无限循环

javascript 
// ❌ 条件永远为 true，程序卡死
while (true) {
  console.log('永远不会停');
}

// ❌ 忘记递增
let i = 0;
while (i < 10) {
  console.log(i);
  // 忘记 i++，循环永远不会结束
}

无限循环会让浏览器页面卡死。如果在控制台测试循环时页面不动了，刷新即可恢复。写循环时务必检查：条件是否会最终变成 false？更新表达式是否会推进循环？