javascript - for var index in 与 forEach

Question

<分区>

Answer 1

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

for(var i = 0; i<array.length; i++){}是行之有效的方法；感觉像 C，工作像 C。

• 遍历每个数组索引，即使是那些没有对应属性/项的索引。
• 适用于任何支持 .length 的对象和名称为 [0..length] 的属性；虽然它也适用于人口稀少的阵列，但可能需要额外的保护措施。
• 不同于forEach , 这允许使用 continue/break/return以及在循环体内手动调整索引(如果需要的话)。

array.forEach(function(item, index){})是我更喜欢的方法，因为它通常就足够了，感觉更干净，并且是 "lazy" .

• 遍历每个具有属性的数组值/索引。
• 隐式暗示每个循环都有一个新的函数作用域。
• 虽然是在 Array.prototype 上定义的，但它通常可以通过 call/apply 用于类似数组的对象。 .
• 它有 more overhead than for..i++ (从 James G. 的评论中窃取的链接)。然而，这通常无关紧要，随着 body 所做功的增加，相对性能差异将减少。

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

• 迭代所有未从枚举中排除的属性，也遍历[原型(prototype)]
• 属性名称在 implementation-defined order 中迭代²

---

这是一个demonstration of some differences :

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); 

---

² 生成 different iteration order between browsers 的示例:

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 也按数字升序排序)。只是不要使用这种方法来迭代序列，不会有任何这样的问题。