循环是编程的核心逻辑之一，它让我们能够重复执行一段代码，处理批量数据、实现自动化操作，是JavaScript开发中不可或缺的基础能力。JavaScript提供了多种循环语句，每种都有其适用场景和特性。本文将从基础到进阶，全面拆解JavaScript中的循环语句，帮你理清它们的用法、区别和最佳实践。
一、JavaScript循环语句的核心分类
JavaScript中的循环语句主要分为两大类：基础循环结构（for、while、do...while）和迭代器循环（for...in、for...of），此外还有特殊的循环控制语句（break、continue）和ES6+新增的迭代方法（如forEach）。我们先从最基础的循环开始讲起。
1. for循环：最经典的计数循环
for循环是JavaScript中最常用、最灵活的循环形式，尤其适合已知循环次数的场景，比如遍历固定长度的数组、执行指定次数的操作。
语法结构
for (初始化表达式; 条件表达式; 更新表达式) { // 循环体：条件为true时执行的代码 }初始化表达式：循环开始前执行一次，通常用于声明循环变量（如
let i = 0）；条件表达式：每次循环前判断，结果为
true则执行循环体，false则终止循环；更新表达式：循环体执行后执行，通常用于更新循环变量（如
i++）。
示例：遍历数组
const fruits = ['苹果', '香蕉', '橙子']; for (let i = 0; i < fruits.length; i++) { console.log(`第${i+1}个水果：${fruits[i]}`); } // 输出： // 第1个水果：苹果 // 第2个水果：香蕉 // 第3个水果：橙子特点
可精准控制循环次数和循环变量的步长（如
i += 2实现隔行遍历）；支持嵌套循环（如二维数组遍历），但嵌套过深会影响性能；
循环变量作用域可通过
let/var控制（推荐用let避免变量泄漏）。
2. while循环：条件驱动的循环
while循环适用于未知循环次数，仅知道循环终止条件的场景，比如用户输入验证、动态数据处理。
语法结构
while (条件表达式) { // 循环体：条件为true时执行 }示例：累加直到和大于100
let sum = 0; let num = 1; while (sum <= 100) { sum += num; num++; } console.log(`累加和超过100时的总和：${sum}`); // 输出：105注意事项
必须在循环体内更新条件相关的变量，否则会导致无限循环（如忘记写
num++）；条件表达式首次判断为
false时，循环体一次都不会执行。
3. do...while循环：先执行后判断
do...while循环是while循环的变体，特点是循环体至少执行一次，再判断条件是否继续循环。
语法结构
do { // 循环体：先执行一次 } while (条件表达式);示例：用户输入验证
let input; do { input = prompt('请输入数字（1-10）：'); } while (isNaN(input) || input < 1 || input > 10); console.log(`你输入的有效数字是：${input}`);特点
适合“必须执行一次”的场景（如表单初始验证、初始化操作）；
结尾的分号不能省略，否则会导致语法错误。
4. for...in循环：遍历对象的可枚举属性
for...in专门用于遍历对象的可枚举属性（包括原型链上的属性），也可遍历数组的索引（但不推荐）。
语法结构
for (const 键名 in 对象/数组) { // 循环体：键名对应对象的属性名/数组的索引 }示例：遍历对象属性
const person = { name: '张三', age: 25, gender: '男' }; for (const key in person) { // 过滤原型链上的属性（推荐） if (person.hasOwnProperty(key)) { console.log(`${key}：${person[key]}`); } } // 输出： // name：张三 // age：25 // gender：男注意事项
遍历数组时，索引是字符串类型（如
"0"），可能导致意外问题；会遍历原型链上的继承属性，需用
hasOwnProperty过滤；遍历顺序不固定（尤其对于非数字属性的对象）。
5. for...of循环：遍历可迭代对象的值
ES6新增的for...of是遍历可迭代对象（数组、字符串、Set、Map、Generator等）的首选方式，直接获取值而非索引/键名。
语法结构
for (const 值 of 可迭代对象) { // 循环体：值对应可迭代对象的每一个元素 }示例1：遍历数组
const numbers = [10, 20, 30]; for (const num of numbers) { console.log(num); // 输出：10 20 30 }示例2：遍历字符串
const str = 'JavaScript'; for (const char of str) { console.log(char); // 逐个输出字符：J a v a S c r i p t }特点
不遍历原型链属性，只遍历自身元素；
支持
break/continue/return中断循环；可结合
entries()获取索引和值：for (const [index, num] of numbers.entries()) {console.log(`索引${index}：${num}`);}
二、循环控制语句：break & continue
除了循环本身，JavaScript还提供了两个关键的控制语句，用于灵活调整循环流程：
1. break：终止整个循环
立即终止当前循环，跳出循环体，执行循环后的代码。
for (let i = 1; i <= 5; i++) { if (i === 3) break; // 当i=3时终止循环 console.log(i); // 输出：1 2 }2. continue：跳过当前次循环
跳过当前循环的剩余代码，直接进入下一次循环的条件判断。
for (let i = 1; i <= 5; i++) { if (i === 3) continue; // 跳过i=3的循环 console.log(i); // 输出：1 2 4 5 }三、补充：数组的迭代方法（forEach）
虽然Array.prototype.forEach()不是传统的循环语句，但它是数组专用的迭代方法，本质上也是循环的一种形式：
const arr = [1, 2, 3]; arr.forEach((item, index) => { console.log(`索引${index}：${item}`); });注意：
forEach无法通过
break/continue中断（除非抛出异常）；不支持
return返回值，始终返回undefined；适合简单的数组遍历，复杂场景推荐for...of。
四、循环语句的选型指南
场景 | 推荐循环 |
|---|---|
已知循环次数（如固定长度数组） | for循环 |
未知循环次数，先判断条件 | while循环 |
必须执行一次的循环 | do...while循环 |
遍历对象的属性（需过滤原型链） | for...in（配合hasOwnProperty） |
遍历数组、字符串、Set/Map等值 | for...of循环 |
简单数组遍历（无需中断） | forEach |
四、循环优化与注意事项
- 避免无限循环：确保
while/do...while/for的条件能最终变为false，for...in/for...of需确认迭代对象可终止； - 减少重复计算：遍历数组时，将
arr.length缓存到变量（尤其大数据量）：javascript
运行
// 优化前 for (let i = 0; i < arr.length; i++) {} // 优化后 const len = arr.length; for (let i = 0; i < len; i++) {} - 及时中断循环：使用
break（终止整个循环）、continue（跳过当前次循环）减少无效执行； - 避免遍历原型链：
for...in遍历对象时，务必用hasOwnProperty过滤原型属性； - 性能优先级：原生
for循环性能略高于for...of，for...in性能最差（需遍历原型链），但日常开发中for...of的可读性更重要，除非处理超大数据量。
五、总结
JavaScript 的循环语句从基础的for/while，到 ES6 的for...of，再到异步的for await...of，覆盖了同步 / 异步、已知 / 未知次数、对象 / 数组等所有遍历场景。核心原则是：根据遍历目标（对象 / 数组 / 异步数据）和场景（次数已知 / 未知、是否必执行一次）选择最合适的循环，同时兼顾代码可读性和性能。
六、总结
JavaScript的循环语句各有侧重：
for循环胜在灵活可控，是基础中的基础；
while/do...while适合条件驱动的循环；
for...in专用于对象属性遍历（需注意原型链）；
for...of是现代迭代的首选，简洁且安全。
在实际开发中，需根据场景选择合适的循环：遍历数组优先用for...of，遍历对象用for...in，固定次数用for循环，条件循环用while。同时，合理使用break/continue控制循环流程，避免无限循环和性能问题。掌握这些循环的核心用法，能让你的代码更高效、更易维护。
)
