冲就完了
目录
引言
在 JavaScript 中，我们经常需要遍历数组或其他集合对象。常见的写法有两种：for...of 和传统的 for 循环。虽然两者都能实现遍历功能，但它们的应用场景、性能和语法风格都有明显差异。
基本语法
for...of 遍历元素
javascript
const arr = [1, 2, 3, 4];
for (const item of arr) {
console.log(item);
}传统 for 循环
javascript
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、字符串需额外操作
性能对比
在百万级数组循环测试中
javascript
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 循环：经典、性能最优，灵活可控，适合大数据量或需要索引操作场景。