javascript中,for循环最好用for..in还是i < array.length?

Old_Cai
  • 473

由于forEach没有直接可用的break,所以循环还是只好靠for。
我一直觉得简单的更好,所以更倾向for..in来遍历数组,但是webstorm中会warning。
如果不应该用for..in来遍历,请告诉我为什么。
代码举例:

var array = [1,2,3,4,5];
for ( var i = 0; i < array.length; i++ ) {
    var item = array[i];
    console.log(item);
}
// 或者
for ( var i in array ) {
    var item = array[i];
    console.log(item);
}
回复
阅读 9.4k
3 个回答
Humphry
  • 16.4k
✓ 已被采纳

一个最简单常见的,为何不要用for in循环遍历数组的例子,是使用了诸如modernizr的库,做了IE6~8的ECMAScript5的Array对应方法的原型扩展的shim的情形。
比如,Array.prototype.forEach = function(){}

for in循环遍历,遍历的是可枚举的自身属性和继承属性,这意味着你的原型链上的扩展方法都会被遍历到,而在上述情形下,肯定会出现你不想要的结果。

示例:

var a = [1,2,3] ;
var getEnumPropertyNames = function (obj) {
    var props = [];
    for (prop in obj) {
        props.push(prop);
    }
    return props;
}

以下是调用结果:

getEnumPropertyNames(a)
-> ["0", "1", "2"]
Array.prototype.newFunc = function(){} ;getEnumPropertyNames(a)
-> ["0", "1", "2", "newFunc"]

阅读更多:

  1. 紫云飞:《JavaScript中的属性:如何遍历属性》
  2. 张鑫旭:《ES5中新增的Array方法详细说明》(及其shim)
  3. modernizr库
WS
  • 561

针对LZ给出的例子,最好选择第一种for...in的方式遍历。

var scores = [98, 74, 85, 77, 93, 100, 89];
var total = 0;
for (var score in scores) {
    total += score;
}
var mean = total / scores.length;
// mean=17636.571428571428

针对数字型数组,第一种for...in总是能正确枚举key,而第二种会发生意想不到的事情,因为第二种适合遍历对象,而对象的key是字符串!

推荐阅读:
《Effective JavaScript》
Item 49: Prefer for Loops to for...in Loops for Array Iteration

LZ自由选择就好
for...in 是 ECMAScript 定义的标准语法,有些语法并不是所有JS引擎都支持
我没有用过 webstorm,估计内置的引擎对 for in 不是很感冒

宣传栏