for for var index in vs. forEach

Question

在javascript中,如果我想循环遍历数组中的每个元素,我有几种方法可以做到这一点:

1.

for(var i =0; i<array.length; i++){}

2.

array.forEach(function(item, index){});

3.

for (var index in array){}

第一个是常见的,但如果我感到懒惰,我想使用第二个或第三个.

但我想知道它们之间是否有任何区别,我应该选择哪种情况？

Answer 1

它们都是微妙的不同方法.

for(var i = 0; i<array.length; i++){}是经过验证的方法; 感觉像C,像C一样工作

• 迭代每个数组索引,甚至是没有相应属性/项的索引.
• 适用于任何支持的对象.length和名称为[0..length)的属性; 虽然它也适用于稀疏填充的阵列,但可能需要额外的防护.
• 与forEach此不同,continue/break/return如果需要,可以在循环体内使用和手动调整索引.

array.forEach(function(item, index){})是我喜欢的方法,因为它通常足够,感觉更清洁,而且"懒惰".

• 迭代具有属性的每个数组值/索引.
• 隐含地暗示每个循环的新功能范围.
• 虽然在Array.prototype上定义它,但它通常可以用于类似数组的对象call/apply.
• 它有更多的开销for..i++(从James G.的评论中窃取链接).然而,这通常无关紧要,相对性能差异将随着身体工作的增加而减少.

for (var index in array){} 在处理数组/序列迭代时不应该使用它.

• 迭代所有未排除的枚举属性,遍历[prototype]
• 属性名称以实现定义的顺序²进行迭代

以下是一些差异的演示:

var array = [];
array[0] = 1;
array[2] = 2;  // Note that `1 in array` is false as it was never set
array.hello_world = 3;

var a = 0;
for(var i = 0; i<array.length; i++){
    a += array[i]
}
// -> NaN; because array[1] was undefined
console.log("index: " + a);

var b = 0;
array.forEach(function (v, i) {
    b += v;
});
// -> 3; because v was never undefined (as array[1] was skipped)
console.log("forEach: " + b);

var c = 0;
for (var p in array) {
    c += array[p];
}
// -> 6; picked up "hello_world" but didn't pick up missing "1" property
console.log("for..in: " + c); 

² 在浏览器之间生成不同迭代顺序的示例:

var a = [];
for (var i = 100000; i > 0; i -= 1000) { a[i] = i; }

var s = "";
for (var p in a) { s += p + ",";  }
console.log(s);

Chrome和IE 10以数字递增的方式迭代; FF按插入顺序迭代(对于较小范围的值,FireFox也按数字递增排序).只是不要使用这种方法迭代序列,不会有这样的问题.