javascript - 数组元素和属性？

Question

所以跟进之前的问题；

由于使用属性和迭代的动态功能

for(var key in array)

我已经多次使用它来尝试枚举数组并按数字进行迭代。

仅 .push 元素和设置为属性的优缺点是什么？

除了明显的识别差异。

Answer 1

简而言之:
永远不要在数组上使用for in，它非常慢并且容易出错。

说明

嗯，尽管 JavaScript 中的 Array 是一个 Object，但没有充分的理由使用 for in 循环来迭代它。事实上，有很多很好的理由反对在数组上使用for in。

虽然乍一看似乎是一个不错的选择，但要以一定的速度与 for in 结构的可读性进行权衡，这对性能有主要影响。

for in 实际上会遍历 Array 的索引。但它确实也遍历了原型(prototype)链。因此，已经必须使用 hasOwnProperty 来确保过滤掉不需要的属性，并且如果数组上恰好定义了任何其他属性，它们仍然会通过此过滤器。

Array.prototype.bar = 1; // poisoning the Object.prototype, NEVER do this
var foo = [1, 2, 3];
for(var i in foo) {
    console.log(i);
}

以上代码产生“索引”0、1、2 和 bar 正在打印。

使用 hasOwnProperty 进行过滤

Array.prototype.bar = 1; // poisoning the Object.prototype, NEVER do this
var foo = [1, 2, 3];
foo.blub = 2;
for(var i in foo) {
    if (foo.hasOwnProperty(i)) {
        console.log(i);
    }
}

上面的代码结果现在打印“索引”0、1、2 和 blub，除非验证 key 为正整数，否则无法以任何有意义的方式过滤掉 blub。

性能

现在，将遍历 for in 的原型(prototype)已经很慢的性质与 hasOwnProperty 的使用相结合，导致性能下降高达 20 倍.

因此，如果您想在 JavaScript 中遍历 Array，请始终使用经典的 for 循环结构。

var list = [1, 2, 3, 4, 5, ...... 100000000];
for(var i = 0, l = list.length; i < l; i++) {
    console.log(list[i]);
}

如您所见，上面的示例中有一个额外的问题。即通过l = list.length缓存长度。

虽然 length 属性是在数组本身上定义的，但在每次迭代时进行查找仍然存在开销。虽然最近的 JavaScript 引擎可能在这种情况下应用了优化，但人们永远无法确定这些优化是否确实到位，也无法确定它们是否达到了上述缓存的速度。事实上，忽略缓存可能会导致性能下降高达 2 倍(在旧引擎中甚至更多)。