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

news2025/5/15 6:40:39

循环是编程中处理重复任务的核心工具。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`	对象属性遍历	✅	❌	✅

五、最佳实践建议

优先选择语义化循环
- 数组遍历用 for...of 代替传统 for
- 对象遍历用 for...in + hasOwnProperty

性能关键场景用基础循环

javascript

复制

下载

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

避免在循环内创建函数

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);
}