for循环开销小,性能瓶颈在循环体内;应减少重复计算、避免频繁对象创建、降低内存访问开销、利用局部性原理;大数据量时需分片或用requestidlecallback防阻塞。

for 循环本身开销极小,真正影响性能的往往是循环体内的操作。高效写法的核心是:减少重复计算、避免不必要的对象创建、降低内存访问开销、利用局部性原理。
缓存数组长度,避免每次读取
在传统 for 循环中,若直接写 for (let i = 0; i ,每次迭代都会重新读取 <code>arr.length 属性(尤其在非 JIT 优化环境或老旧引擎中可能触发属性查找)。虽然现代 V8 等引擎多数能自动优化,但显式缓存更稳妥、语义更清晰。
- ✅ 推荐:const len = arr.length; for (let i = 0; i
- ❌ 避免:for (let i = 0; i (尤其在长数组或高频循环中)
优先使用 for...of(配合 const/let)而非 for...in
for...in 遍历的是对象的可枚举属性名(包括原型链),不保证顺序,且对数组易出错;for...of 直接遍历可迭代值,语义明确、性能稳定,V8 对其有深度优化(如消除边界检查、内联迭代器)。
- ✅ 数组遍历首选:for (const item of arr) { ... }(简洁、安全、现代引擎下性能不输传统 for)
- ✅ 需索引时:for (let i = 0, len = arr.length; i
- ❌ 不要用:for (const key in arr) { ... }(非预期行为,慢且危险)
避免在循环内创建闭包或新对象
每次迭代都 new Object()、声明函数、或调用返回新对象的方法(如 arr.map(...) 内部),会持续触发内存分配与 GC 压力。
- ✅ 提前创建复用:const tempObj = {}; for (...) { Object.assign(tempObj, data); process(tempObj); }
- ✅ 函数提至循环外:const handler = x => x * 2; for (...) { result.push(handler(arr[i])); }
- ❌ 每次新建:for (...) { const obj = {}; ... } 或 for (...) { arr[i].map(x => x + 1); }
大数据量时考虑分片或 requestIdleCallback
单次执行上万次迭代可能阻塞主线程,导致页面卡顿。此时“快”不如“不卡”。可将任务拆解,交由浏览器空闲时间处理。
- ✅ 分片示例:function processInChunks(arr, chunkSize = 1000) { let i = 0; return function next() { const end = Math.min(i + chunkSize, arr.length); for (; i
- ✅ 适合场景:数据预处理、批量 DOM 更新、复杂计算等非实时强依赖任务










