JavaScript遍历数组的2种方式以及需要注意的问题
本文由 小茗同学 发表于 2016-07-13 浏览(3025)
最后修改 2016-08-22 标签:javascript in 关键字 遍历 数组 hasOwnProperty prototype array for

遍历数组的2种方式

for in 法

var array = ['aaa', 'bbb', 'ccc'];
for(var i in array)
{
    console.log(typeof i, i, array[i]);
}

可以发现, i 是类型是string而不是number,这一点很容易忽略,切记!

普通的for循环法

var array = ['aaa', 'bbb', 'ccc'];
for(var i=0; i<array.length; i++)
{
    console.log(typeof i, i, array[i]);
}

自定义Array的prototype对for in的影响

Array.prototype.test = function(){}
var array = ['aaa', 'bbb', 'ccc'];
for(var i in array)
{
    console.log(typeof i, i, array[i]);
}

可以发现,除了输出0、1、2之外,test也被输出了!也就是说使用for in遍历数组时,自定义的Array.prototype也会被输出,但是js内置的则不会。

解决这种问题方法有2种,一种是使用普通for循环替代,一种是使用hasOwnProperty做前置判断:

Array.prototype.test = function(){}
var array = ['aaa', 'bbb', 'ccc'];
for(var i in array)
{
    if(!array.hasOwnProperty(i)) continue;
    console.log(typeof i, i, array[i]);
}

结论

  • 2种遍历方式大部分情况下没啥大区别,但是(继续往下看)
  • for in 遍历数组输出的索引i是string类型而非number类型;
  • for in 遍历数组会输出自定义的Array.prototype的内容;
  • 强烈建议无论何时都使用普通for循环来遍历数组,for in只用来遍历对象