JavaScript 的 for...of 循环是 ES6 引入的专门用于可迭代对象的遍历语法，数组作为典型的可迭代对象，使用 for...of 迭代可以大幅简化代码逻辑，避免传统 for 循环手动维护索引的繁琐，也解决了 forEach 无法中断遍历的问题。掌握它的正确用法能让数组操作代码更简洁高效。
for...of 迭代数组的基础用法
for...of 循环会直接遍历数组的每个元素值，不需要像传统 for 循环那样通过索引取值，语法结构非常清晰。基础使用示例如下：
// 定义一个测试数组
const fruits = ['苹果', '香蕉', '橙子', '葡萄'];
// 使用for...of遍历数组元素
for (const fruit of fruits) {
console.log(fruit); // 依次输出：苹果、香蕉、橙子、葡萄
}
需要注意的是，for...of 遍历的是数组的元素值，而不是索引，如果需要同时获取索引和值，可以配合数组的 entries 方法使用。
获取迭代索引的正确方式
很多开发者误以为 for...of 无法直接获取索引，其实只要调用数组的 entries() 方法，就能同时拿到索引和对应的值，示例如下：
const scores = [85, 92, 78, 90];
// entries方法返回包含[index, value]的迭代器
for (const [index, score] of scores.entries()) {
console.log(`第${index + 1}个成绩是：${score}`);
}
// 输出：
// 第1个成绩是：85
// 第2个成绩是：92
// 第3个成绩是：78
// 第4个成绩是：90
迭代过程中的中断与跳过
for...of 循环支持使用 break 和 continue 关键字，这是它比 forEach 方法更灵活的地方。如果需要提前结束遍历或者跳过某次迭代，可以直接使用这两个关键字：
const numbers = [1, 2, 3, 4, 5, 6];
// 跳过偶数，遇到大于4的数就停止遍历
for (const num of numbers) {
if (num % 2 === 0) {
continue; // 跳过偶数
}
if (num > 4) {
break; // 大于4时中断循环
}
console.log(num); // 输出：1、3
}
异步迭代的正确处理
如果数组中的元素是异步操作，直接使用 for...of 遍历会出现问题，因为 for...of 本身不会等待异步操作完成。正确的做法是配合 async/await 使用，示例如下：
// 模拟异步请求函数
function fetchData(id) {
return new Promise(resolve => {
setTimeout(() => {
resolve(`数据${id}加载完成`);
}, 1000);
});
}
const ids = [1, 2, 3];
// 异步遍历数组，等待每个异步操作完成再执行下一个
async function loadAllData() {
for (const id of ids) {
const result = await fetchData(id);
console.log(result);
}
}
loadAllData();
// 依次输出（每个间隔1秒）：数据1加载完成、数据2加载完成、数据3加载完成
for...of 与其他迭代方式的对比
为了更清楚 for...of 的适用场景，我们将它和常见的数组迭代方式做对比：
| 迭代方式 | 可获取值 | 可中断 | 适用场景 |
|---|---|---|---|
| 传统 for 循环 | 索引、值 | 是 | 需要复杂索引操作的场景 |
| forEach 方法 | 值、索引、原数组 | 否 | 不需要中断的简单遍历 |
| for...of 循环 | 值（配合entries可获取索引） | 是 | 需要中断、异步遍历的场景 |
使用注意事项
- for...of 只能遍历可迭代对象，普通对象如果没有实现迭代器接口，不能直接用 for...of 遍历，否则会报错。
- 遍历过程中如果修改数组长度，可能会影响遍历结果，建议遍历前先拷贝数组，或者避免在遍历中修改原数组。
- 如果需要遍历数组的键，可以使用 for...in 循环，但 for...in 会遍历到数组的自定义属性，不适合纯数组值遍历，优先使用 for...of。
JavaScriptfor...of数组迭代循环语法修改时间：2026-07-21 12:09:22