for...of vs for 循环全面对比【前端JS】

冲就完了

引言

在 JavaScript 中，我们经常需要遍历数组或其他集合对象。常见的写法有两种：for…of 和传统的 for 循环。虽然两者都能实现遍历功能，但它们的应用场景、性能和语法风格都有明显差异。

基本语法

for…of 遍历元素

const arr = [1, 2, 3, 4];

for (const item of arr) {
  console.log(item);
}

传统 for 循环

const arr = [1, 2, 3, 4];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

应用场景对比

用途 / 场景	推荐写法	原因
✅只需要遍历元素	for of	语法简洁，可读性强
✅性能敏感（大循环）	for (let i=0; i<...)	CPU 更快，没有迭代器开销
✅需要访问索引	for (let i=...)	有 i 可用
✅需要修改原数组元素	for (let i=...)	直接按索引修改
✅遍历字符串、Set、Map	for of	专门为可迭代对象设计
✅异步遍历串行执行	for of await	可同步顺序处理异步任务
❌跳过、continue、break	for (let i=...)	for of 虽然支持但不直观
⚠️遍历对象	❌for of 不适用	需要 for in 或 Object.keys()

优缺点分析

for…of

优点：

• 语法简洁，专门用于迭代可迭代对象（Array、Set、Map、String）
• 避免下标越界问题
• 支持 for of await 异步串行操作

缺点：

• 没有索引，需要额外方法获取索引
• 性能略慢，尤其在大数组中，因为背后使用了迭代器
• 不适合直接修改原数组元素

传统 for 循环

优点：

• 性能高，特别是大数组循环时
• 获取索引
• 灵活操作数组（修改、跳过、提前退出）

缺点：

• 语法相对冗长
• 遍历 Set、Map、字符串需额外操作

性能对比

在百万级数组循环测试中

const arr = Array.from({ length: 1000000 }, (_, i) => i);

console.time('for-loop');
for (let i = 0; i < arr.length; i++) {}
console.timeEnd('for-loop');

console.time('for-of');
for (const item of arr) {}
console.timeEnd('for-of');

结果：for 循环最快；for…of 略慢；forEach 最慢（回调开销 + 无法 break）

实战选择指南

• 只遍历元素，追求简洁 → for…of
• 需要索引、修改数组、性能敏感 → for
• 异步顺序处理 → for…of await
• 遍历对象 → for in 或 Object.keys()

结论

建议使用，但是在实际开发中，可以根据项目需求灵活选择，不必局限于单一写法。

• for…of：现代语法，语义清晰，适合普通数组、Set、Map和字符串遍历。
• for 循环：经典、性能最优，灵活可控，适合大数据量或需要索引操作场景。