本文通过实际测试对比了JavaScript中两种常见的数组遍历写法：直接读取arr.length与预先缓存length至变量n。结果显示，在Chrome、Firefox及IE8中，直接读取length并未带来显著性能损耗，且代码更简洁。测试表明缓存length并非必须的优化手段，开发者可根据实际需求选择。
接下来，我们将探讨一个可能挑战传统观点的话题。
传统观点：缓存 length 提升性能
自学习编程以来，我们频繁接触到关于数组遍历的警告：使用 `for(var i=0,n=arr2.length;i<n;i++)` 优于 `for(var i=0;i<arr.length;i++)`。理由是后者会在每次迭代中重新计算数组的 `length` 属性，从而降低效率。
性能测试设计与过程
这里我们仅聚焦于 JavaScript，因为不同语言的实现机制各异。所谓“缓存 length 更快”的观点，往往源于直觉而非实证。事实上，`arr.length` 只是读取原生属性，其开销极小。读取原生属性与读取局部变量相比，谁更快？基于直觉，我认为直接读取 `length` 可能更高效，因此我构建了一个测试来验证这一假设。
测试代码如下：
var arr=[],arr2=[],i=0
while(i<100000){
arr.push(i)
arr2.push(i)
i++
}
M.TA.begin("0000");
for(var i=0;i<arr.length;i++){
arr[i]=arr[i]*arr[i]*arr[i]
}
M.TA.end("0000","for(var i=0;i<arr.length;i++)")
M.TA.begin("0001");
for(var i=0,n=arr2.length;i<n;i++){
arr2[i]=arr2[i]*arr2[i]*arr2[i]
}
M.TA.end("0001"," for(var i=0,n=arr2.length;i<n=i++)")
M.TA.showResult()该测试代码较为极端，占用了超过 300MB 的内存。
Chrome 浏览器测试结果如下：
Firefox 浏览器测试结果如下：
（经过多种性能测试发现，Firefox 在基础运算效率上远高于 Chrome，但在渲染方面较慢。）
IE8 浏览器测试结果如下：
（由于结果差异过大，上述脚本在 IE 中无法正常运行。）
总结：
测试结果与结论分析
本测试并非旨在证明 `for(var i=0;i<arr.length;i++)` 绝对更快，因为测试存在误差。核心结论是：直接读取 `length` 并不会造成显著的性能瓶颈，且该写法具有更高的灵活性、简洁性和更少的代码量。此外，若数组长度在循环中动态变化，第一种写法能自动适应，而第二种缓存写法则需额外处理。
尽管我对传统观点保持尊重，但测试结果令人深思。若发现错误，请一笑置之；若无误，则这是一篇有价值的技术分享。
转载注明：
http://www.html-js.com