JavaScript for循环性能优化与for-in陷阱详解

当需要重复执行同一段代码且每次迭代的值不同时，使用循环结构是高效的选择。

for循环性能优化：预缓存数组长度

在实际开发中，for循环常用于遍历数组，常见的写法如下所示：

// 次佳的循环
for (var i = 0; i < myarray.length; i++) {
 // 使用myarray[i]做点什么
}

尽管上述代码逻辑上通常没有错误，但每次迭代都会重新计算数组长度，这会降低代码执行效率。特别是当遍历对象并非标准数组，而是HTMLCollection等类数组对象时，这种性能损耗更为显著。

改进后的代码如下：

for (var i = 0, max = myarray.length; i < max; i++) {
 // 使用myarray[i]做点什么
}

这种写法仅在循环开始前获取一次数组长度，从而提升了代码的执行质量与效率。

结合“单var”声明模式，可以将变量提取到循环外部，优化后的结构如下：

function looper() {
 var i = 0,
  max,
  myarray = [];
 // ...
 for (i = 0, max = myarray.length; i < max; i++) {
  // 使用myarray[i]做点什么
 }
}

JavaScript for循环使用注意事项总结

该问题的讨论最初源于公司内部邮件，此处仅对讨论内容进行整理记录。

for-in遍历数组的IE兼容性与原型链陷阱

部分项目组在排查问题时发现，在IE浏览器中使用“for(x in array)”这种遍历方式时，变量x会出现非预期的值。

具体而言，如果开发者自定义了Array.prototype.indexOf方法（例如出于对旧版IE不支持该方法的兼容考虑，或存在prototype污染），在某些浏览器中可能会引发如下问题：

Array.prototype.indexOf = function(){...};
var arr = [1, 2];
for (x in arr) console.log(x);

// 输出结果

1
2
function(){…}

这意味着自定义的indexOf方法也被枚举了出来。

解决该问题的方法较为简单：要么不添加该原型方法，要么改用“for (i=0; i < array.length; i++)”这类基于索引的循环方式。

问题的本质在于，有人推测“for(x in obj)”实际上是在遍历对象属性，而数组的实现与普通对象一致，仅键名为固定数值：

{0:"something", 1:"something else"}

for-in与for(;;)的区别及枚举特性

在StackOverflow的相关问答中也指出，遍历数组时使用for…in与for(;;)存在区别，前者旨在枚举对象属性，主要存在以下两个问题：

枚举顺序无法得到保证；

继承的属性也会被枚举出来；

从兼容性表中可以明确看到，IE8及以下版本无法准确支持Array.prototype.forEach：

此处提供了关于forEach方法兼容性的详细阐述。事实上，主流JavaScript框架（如jQuery、Underscore和Prototype等）均提供了安全且通用的for-each功能实现。

JSLint的for in章节也指出，for in语句允许遍历对象属性名，但也会遍历通过原型链继承下来的属性，这常导致非预期的错误。一种粗暴的解决办法是：

for (name in object)

 { if (object.hasOwnProperty(name))

 { .... } }

变量作用域问题与let关键字的应用

此外，有人提到在使用“for(var i=0;i<length;i++)”这类循环时也存在隐患。由于JavaScript缺乏代码块级别的变量作用域，此处的i实际上属于所在方法的变量。尽管有些书籍建议将此类变量声明集中放置，但从直观性来看，在大多数情况下这种做法并不合理。

使用JavaScript 1.7引入的“let”关键字可以解决此问题，使i成为真正的代码块级别变量：

for(let i =0; i < a.length; i++)

最后，Google的JavaScript风格指南中也涉及了这一约束：

for-in loop：


Only for iterating over keys in an object/map/hash

以上即为关于JavaScript for循环注意事项及问题总结的全部内容，希望能为今后的工作学习提供帮助，同时也欢迎业内人士提出批评与建议。

如需了解更多细节，可查看这篇文章：https://www.jb51.net/article/80351.htm