javascript - js中遍历数组：for vs forEach vs map

Question

2016/7/24 更新

最后我还是觉得遍历数组的话，不同方法适用于不同的场景

• for 这是最稳妥的遍历方式，浏览器都支持

• for-in 不推荐，两个原因：不能保证遍历的顺序是预期的；遍历可能会带出不是预期的属性的值

• forEach() 非常好用的遍历方式，ES5+，如果担心运行时资源消耗的问题，可以看看forEach and runtime cost。缺陷是不能使用 break

• map() ES5+，适用于“链式”场景，如 a.map(i => {return i + i;}).sort();，很有b格

• for-of ES6+，适用于全部元素的遍历，缺陷是不知道 index

• 迭代器，ES6 新特性，希望补充

详情在我的博客《JavaScript 数组遍历》中。有什么好的想法也欢迎大家提出来。

---

最近在思考高效遍历数组的方式，也 google 了一下，然后在这篇博客里（.map() vs .forEach() vs for()）博主推荐的是 map > forEach > for.

    var array = [1, 2, 3];
    //for
    for (let i = array.length; i--;) {
        console.log(array[i]);
    }
    //forEach
    array.forEach((item, index, array) => console.log(item));
    //map
    array.map(n => console.log(n));
    //for-of
    for (val of array) {
        console.log(val);
    }
    //iterator
    for (let entry, itr = array[Symbol.iterator](); !(entry = itr.next()).done; ) {
        console.log(entry.value);
    }

求解答，推荐的数组遍历方式

Answer 1

我来谈一下我的看法， 首先我认为这3个函数一定有区别， 所以看场景使用：
首先说性能， 那篇文章里竟然用代码长度来说， 我不认同， 我以前写过个测试， 速度上来说for高于loadash的each远高于forEach。
第二说一下函数的区别， for有一个好处是可以break， foreach想break的话只能设置flag来阻止代码块运行。
我强行引入了loadash的each，现在流行‘YOU DONT NEED XXX’系列， 看件github上有个lib you dont need undercore， 我觉得就是哗众取宠， es5的foreach和loadash的each性能天差低别， 而且loadash的each可以遍历对象。
最后说一下map， 我测试的时候没有算他， map的用法是遍历数组并改变数组的每个元素， 不知道为什么要把他和循环比。
我的看法说完了， 所以推荐 for 》foreach。只是写得麻烦。

Answer 2

个人比较常用的是for 和map。forEach几乎不用。
性能上for循环如果是普通不优化写法，

var someArray=[1,2,3,...];
for(var i = 0; i < someArray.length; ++){
    //do something
}

这么写比forEach强一些，不特别多。
但是如果优化了，

var someArray=[1,2,3,...], arrayLength = someArray.length;
for(var i = arrayLength - 1; i >= 0; i --){
    //do something
}

这样写性能就会高很多了。

Answer 3

按需使用。
比如在 async/await 处理异步时，多任务如果用forEach, map，就会得到错误结果或者直接报错。
但正常流程里，问题不是很大，这些方法本来就是为了方便我们使用而诞生的。
合适的时候用合适的代码即可。

var array = [1, 2, 3];
for (let i = array.length; i--;) {
    console.log(array[i]);
}

for (let n of array) {
    console.log(n);
}

array.forEach(n => console.log(n));

array.map(n => console.log(n));