JavaScript中遍历数组的方式:forEach 相对于 for 有什么优势◔ ‸◔?

问题:在实现同样功能的前提下,map和forEach除了能够节省代码量之外,还有其他的优势吗?

效率方面经过我的测试,for高于另外两个方法。总体排序:
for > forEach > map

效率测试代码:

var arr = [],
  max = 1000;
for (var i = 1; arr.push(i++) < max;);

var mapArr = [],forEachArr = [],forArr = [];

console.time('map');
arr.map(function (val) {
  mapArr.push(val);
})
console.timeEnd('map');

console.time('forEach');
arr.forEach(function (val) {
  forEachArr.push(val);
})
console.timeEnd('forEach');

console.time('for');
for (var i = 0; i < arr.length; i++) {
  forArr.push(arr[i]);
}
console.timeEnd('for');

执行了三次,结果分别为:
图片描述
图片描述
图片描述

--------------------- 分割线 ---------------------

补充问题:
map在功能定义上来说不适合与for以及forEach来进行比较,它会生成一个经过处理的新数组,因此内部实现肯定会相对于forEach来说更复杂一些。

这个问题应该问的是:forEach相对于for来说,实现同样的功能,除了方便书写能够节省代码量之外,还有没有其他的优势或者特殊用途?

备注:如果对于效率要求高的项目相信不会使用forEach来遍历数组,所以才会问使用forEach有没有在哪个方面有明显的好处。

-------------------1月16日更新------------------------
首先,感谢各位回答!
第一次的问题是:for+i、forEach、map这三种方式在遍历数组的时候,各有什么优势和区别?
这个问题中,map的功能定位不同于另外两个方式,所以放在一起做对比不是很合适。不过大家还是给出了一些很有用的答案。

后来原问题改成了:JavaScript中遍历数组的方式:forEach 相对于 for 有什么优势?
经过这么多天大家的解答以及补充,我学到了很多有用的知识点。再次感谢大家。

阅读 13.5k
评论
    16 个回答

    forEach相比普通的for循环的优势在于对稀疏数组的处理,会跳过数组中的空位。
    如下所示:

    for 循环

    var arr = new Array(1000);
    
    arr[0] = 1;
    arr[99] = 3;
    arr[999] = 5;
    // for循环
    for (var i = 0, l = arr.length; i < l; i++) {
        console.log('arr[%s]', i, arr[i]);
    }
    console.log('i :' , i);
    // ...
    // arr[0] 1
    // ...
    // arr[99] 3
    // ...
    // arr[999] 5
    // i : 1000
    
    // for - in 循环
    var count = 0;
    for(var j in arr){
        count ++ ;
        if(arr.hasOwnProperty(j)){
            console.log('arr[%s]', j, arr[j]);
        }
    }
    console.log('count : ', count);
    // arr[0] 1
    // arr[99] 3
    // arr[999] 5
    // i : 1000

    forEach循环

    var arr = new Array(1000);
    arr[0] = 1;
    arr[99] = 3;
    arr[999] = 5;
    
    var count = 0;
    arr.forEach(function(value, index) {
        count++;
        console.log(typeof index);
        console.log(index, value);
    });
    console.log('count', count);
    // number
    // 0 1
    // number
    // 99 3
    // number
    // 999 5
    // count 3

    Array 在 Javascript 中是一个对象, Array 的索引是属性名。事实上, Javascript 中的 “array” 有些误导性, Javascript 中的 Array 并不像大部分其他语言的数组。首先, Javascript 中的 Array 在内存上并不连续,其次, Array 的索引并不是指偏移量。实际上, Array 的索引也不是 Number 类型,而是 String 类型的。我们可以正确使用如 arr[0] 的写法的原因是语言可以自动将 Number 类型的 0 转换成 String 类型的 "0" 。所以,在 Javascript 中从来就没有 Array 的索引,而只有类似 "0" 、 "1" 等等的属性。有趣的是,每个 Array 对象都有一个 length 的属性,导致其表现地更像其他语言的数组。但为什么在遍历 Array 对象的时候没有输出 length 这一条属性呢?那是因为 for-in 只能遍历“可枚举的属性”, length 属于不可枚举属性,实际上, Array 对象还有许多其他不可枚举的属性。 深入了解 JavaScript 中的 for 循环

      相似问题
      推荐文章