传统 for 循环性能最高，适合需中断或大数据量场景；for...of 语法简洁，适用于可迭代对象；避免用 for...in 遍历数组；高阶函数 map/forEach 可读性好但有性能开销；优化建议包括缓存长度、减少 DOM 操作和避免重复计算。
JavaScript 中的循环和迭代是日常开发中频繁使用的操作，尤其在处理数组或类数组结构时。然而，不同循环方式在性能、可读性和适用场景上存在差异。合理选择迭代方案不仅能提升代码效率，还能增强可维护性。
传统 for 循环：最高效的遍历方式
在所有循环结构中，传统 for 循用通常具有最高的执行效率，因为它直接通过索引访问元素，控制条件清晰，且没有额外函数调用开销。
优化建议：
- 缓存数组长度，避免每次循环都访问 length 属性
- 适用于需要中断（break）或继续（continue）的场景
for...of 循环：现代语法，简洁易读
for...of 是 ES6 引入的语法，专为可迭代对象设计（如数组、Set、Map 等），代码更简洁，语义更清晰。
优点：
- 无需关心索引，直接获取值
- 支持 break、continue、return
- 比 forEach 更灵活
避免使用 for...in 遍历数组
for...in 主要用于遍历对象的可枚举属性，不推荐用于数组。它会遍历原型链上的属性，且不能保证顺序，还可能将字符串索引转为字符串类型。
如果误用于数组，可能导致意外行为：
// 不推荐 for (const key in arr) { if (arr.hasOwnProperty(key)) { console.log(arr[key]); } }高阶函数：map、forEach、filter 的取舍
虽然 map 和 forEach 写法优雅，但它们内部有函数调用开销，在大数据量下性能低于 for 循环。
使用建议：
- 注重代码可读性且数据量不大时，优先使用 map/forEach
- 需要生成新数组用 map，仅执行操作用 forEach
- 避免在 forEach 中使用 await，应改用 for...of + async
.forEach(item => {
console.log(item);
});
减少重复计算与 DOM 操作
循环中的性能瓶颈常来自外部操作，而非循环本身。例如在循环中频繁操作 DOM 或重复计算表达式。
优化策略：
- 将 DOM 更新集中处理，使用文档片段（DocumentFragment）
- 提取循环外不变的变量或函数调用
- 避免在循环体内声明函数或对象
基本上就这些。选择哪种迭代方式，取决于具体需求：追求极致性能用传统 for，追求可读性用 for...of 或高阶函数。理解每种方式的底层机制，才能写出既高效又清晰的代码。
