在JavaScript中遍历数组的三种方法:forEach、for、for/in

作者:admin     字体:[增加 减小]    类型:原创
本文详细讲解了遍历数组的三种方法:forEach、for、for/in,并讲了每种方法的优缺点。这里我们推荐使用forEach,也可以使用for,但最好不要使用for/in。

在JavaScript中,遍历数组共有三种方法,我们分别来介绍。

使用 forEach() 方法

forEach()方法从头至尾遍历数组,为每个元素调用指定的函数。传递的函数作为forEach()的第一个参数。然后forEach()使用三个参数调用该函数:数组元素、元素的索引和数组本身。

Object.prototype.cc = 555;
var a = [11,22,,0,undefined,null,33];
a.x = 1;
a.y = 1;

var s = "";
a.forEach(function(v,i){
    s+= i + "-" + v + "|";  
});
console.log(s); //0-11|1-22|3-0|4-undefined|5-null|6-33|

从上面可以看出,forEach非常好的遍历了数字索引元素,达到了遍历数组的目的,不仅自动跳过了undefined元素,而且不会跳过值为undefined的元素,非常智能。但是使用forEach时,我们无法使用break来跳出循环。

使用for循环来遍历数组

使用for语句来遍历数组,不会像forEach那样智能过滤稀疏数组,但是我们可以模拟实现。

Object.prototype.cc = 555;
var a = [11,22,,0,undefined,null,33];
a.x = 1;
a.y = 1;

var s = "";
for(var i=0,len=a.length;i<len;i++ ){
    if(!(i in a)) continue; //跳过不存在的元素
    //if(a[i]===undefined) continue;    //跳过不存在的元素与值为undefined的元素
    //if(a[i]==undefined) continue; //跳过不存在的元素与值为undefined与null的元素
    s+= i + "-" + a[i] + "|";
}
console.log(s); //0-11|1-22|3-0|4-undefined|5-null|6-33|

使用for/in循环来遍历数组

遍历对象的元素时,我们经常使用for/in,对于数组来说,它只不过是比对象多了一个length属性,当然也可以使用for/in来遍历数组,但是for/in循环能够枚举继承的属性名,比如:

var bb = "123";
var cc = 123;
console.log(bb===cc);

Object.prototype.cc = 555;
var a = [11,22,,0,undefined,null,33];
a.x = 1;
a.y = 1;

var s = "";
//如果不加检测,可以遍历到所有的自有属性与继承来的属性
for(var i in a){
    s += i + "-" + a[i] + "|";
}
console.log(s); //0-11|1-22|3-0|4-undefined|5-null|6-33|x-1|y-1|cc-555|

s="";
//检测自有属性,过滤掉继承来的属性
for ( var i in a ) {
    if (!a.hasOwnProperty(i)) continue; //跳过继承来的属性,即跳过cc
    s += i + "-" + a[i] + "|";  //0-11|1-22|3-0|4-undefined|5-null|6-33|x-1|y-1|
}
console.log(s);

s="";
//检测自有属性与索引属性
for ( var i in a ) {
    if (!a.hasOwnProperty(i)) continue; //跳过继承来的属性,即跳过cc
    if(String(Math.floor(Math.abs(Number(i))))!==i) continue; //过滤掉非负整数
    s += i + "-" + a[i] + "|";  //0-11|1-22|3-0|4-undefined|5-null|6-33|
}
console.log(s);

从上面可以看出来,利用for/in遍历数组的确不太方便,一方面要检测是否为自有属性,一方面还要检测是否为索引元素,另外还要注意的是,如果创建数组的顺序不是按升序排列,那么返回的属性名顺序就无法控制了。所以最好不要使用for/in遍历数组。