JavaScript使用for...in迭代数组分析(不推荐)

时间:2021-12-16 16:09:01

for...in与其说是迭代,更恰当的说法应该是枚举。其目的是用来枚举object对象的属性,包括对象所继承的属性。

有部分人会使用for...in来迭代数组,这是一种误用。

以下对使用for...in迭代数组分析。

问题一

var a = ['a','b'];
a[5] = 'e';
for (var x in a) {
    console.log(x);
}

输出结果:

0
1
5

比较于:

for (var x of a) {
  console.log(x);
}

输出结果:

a
b
undefined
undefined
undefined
e

for...in只会输出设置了值的索引值,而for...of会迭代数组里所有的值。

问题二
在Array的原型上添加方法。

Array.prototype.hello = function () { 
  console.log("say hello");
};

对数组执行for...in 

var a = ['a','b'];
a[5] = 'e';
for (var x in a) {
    console.log(x);
}

输出结果:

0
1
5
hello

for...in也会枚举Array原型添加的方法。

总结

上面的两个问题归根到底for...in是枚举Array的属性,而非数组里的元素。其中arr[x]是使用下标添加属性的一种方式。所有除非是要枚举Array的属性,否则不推荐使用for..in迭代数组元素。迭代数组元素使用for...of。