JavaScript 循环语句全解析：选择最适合的遍历方式

循环是编程中处理重复任务的核心工具。JavaScript 提供了多种循环语句，每种都有其适用场景和独特优势。本文将深入解析 JavaScript 的 6 种核心循环语句，通过实际示例帮助你精准选择合适的循环方案。

---

一、基础循环三剑客

1. for 循环

经典索引控制

javascript

复制

下载

for (let i = 0; i < 5; i++) {console.log(`第 ${i} 次循环`);
}

特点：

• 精确控制循环次数

• 支持索引访问

• 适合已知长度的数组遍历

2. while 循环

条件优先循环

javascript

复制

下载

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

特点：

• 先检查条件后执行

• 适合不确定次数的循环

• 警惕无限循环风险

3. do...while 循环

先斩后奏型

javascript

复制

下载

let x = 5;
do {console.log(x);  // 至少执行一次x++;
} while (x < 3);

特点：

• 无论条件如何至少执行一次

• 适合必须初始化执行的场景

---

二、现代遍历利器

4. for...of 循环

可迭代对象专用

javascript

复制

下载

const colors = ['红', '绿', '蓝'];
for (const color of colors) {console.log(color);  // 直接获取元素值
}

优势：

• 支持数组/字符串/Map/Set

• 避免索引操作错误

• 可配合 break 中断循环

5. for...in 循环

对象属性遍历器

javascript

复制

下载

const phone = { brand: 'Xiaomi', model: '13' };
for (const key in phone) {console.log(`${key}: ${phone[key]}`);
}

注意：

• 遍历对象可枚举属性

• 配合 hasOwnProperty 过滤原型属性

• 不保证遍历顺序（ES6+ 已规范）

---

三、特殊循环技巧

6. 循环控制语句

灵活流程控制

javascript

复制

下载

// break 跳出整个循环
for (let i = 0; i < 10; i++) {if (i === 5) break;console.log(i);  // 0-4
}// continue 跳过当前迭代
let n = 0;
while (n < 5) {n++;if (n === 3) continue;console.log(n);  // 1,2,4,5
}

7. 嵌套循环优化

标签语句应用

javascript

复制

下载

outerLoop: 
for (let i = 0; i < 3; i++) {innerLoop:for (let j = 0; j < 3; j++) {if (i === 1 && j === 1) {break outerLoop;  // 同时跳出外层循环}console.log(i, j);}
}

---

四、循环方法对比指南

循环类型	最佳场景	可中断性	索引访问	对象支持
for	精确控制次数的遍历	✅	✅	❌
while	条件驱动的未知次数循环	✅	❌	❌
do...while	必须执行一次的循环	✅	❌	❌
for...of	数组等可迭代对象	✅	❌	❌
for...in	对象属性遍历	✅	❌	✅

---

五、最佳实践建议

1. 优先选择语义化循环

   • 数组遍历用 for...of 代替传统 for

   • 对象遍历用 for...in + hasOwnProperty

2. 性能关键场景用基础循环

   javascript

   复制

   下载

   // 缓存数组长度提升性能
   const arr = [/* 大数据数组 */];
   for (let i = 0, len = arr.length; i < len; i++) {// 处理逻辑
   }

3. 避免在循环内创建函数

   javascript

   复制

   下载

   // 不推荐
   for (let i = 0; i < 5; i++) {setTimeout(() => console.log(i), 0);
   }// 推荐：使用块级作用域
   for (let i = 0; i < 5; i++) {(function(j) {setTimeout(() => console.log(j), 0);})(i);
   }

---

结语

掌握 JavaScript 循环语句的精髓在于理解每种结构的特性：

• 传统循环：精确控制，性能优先

• 现代遍历器：简洁安全，语义清晰

• 对象遍历：专属方案，避免误用