.map() vs .forEach() vs for() 如何选择？

2024年1月14日 154次阅读 来源: sutaking

访问原文地址

.map() vs .forEach() vs for()

笔者说，自己基本没怎么用过for()来遍历，主要是用.forEach()。

但是总是会被很多朋友说，这些人认为for()的速度要比.forEach()快一点。（其实这根本没有根据，下面会讲）

速度当然是很重要的，但是我们也需要从其他方面考虑一下，特别是代码资源。

这里有一篇很棒的文章,很好的分析了for()遍历。它同时也针对for()遍历和.forEach()做了比对[测试](https://jsperf.com/for-vs-foreach/37)。for()与.forEach()`相比会消耗更多的内存。

这样，又回到了老问题，是用空间换速度，还是反之？

当然，都很重要。首先，这2个方面都不会成为你代码中的瓶颈问题。其次，那些小小的优化技巧也不会很好的平衡这2个问题，只会增加你的工作量而已。那我在来看下可读性、可控性、以及可维护性之间的对比呢。

让我们先来看个基本的sample

比如这个数组

var arr = [1, 2, 3];

.map():

arr.map(fcuntion(i) {
    console.log(i);
})

43个字母

.forEach():

arr.forEach(function(i){
    console.log(i)
})

47个字母

for()

for(var i=0,l=arr.lengrh;i<l; i++) {
    console.log(i);
}

70个字母

.map()和.forEach()明显要简短一些，并且他们的可读性更强，同时他们也创建了各自的scope，而for()在执行完遍历之后会把i和l这两个元素挂起来，这让我们需要手动增加一些代码去清除他们所占用的内存。

所以，这时候可以告诉你的朋友：

用.forEach()或者.map()。

.map() vs .forEach()

那么接下来，我继续做分析，为什么更推荐用.map()，而不是.forEach()？

首先，.map()要比.forEach()执行速度更快。虽然我也说过执行速度不是我们需要考虑的主要因素，但是他们都比for()要更好用，那肯定要选更优化的一个。

第二，.forEach()的返回值并不是array。如果你想用函数式编程写个链式表达式来装个逼，.map()将会是你不二的选择。

来看下面这个例子：

var arr = [1, 2, 3];

console.log(
    arr.map(function(i){
        return i+i;
    })
    //链式风格
    .sort()
);// [2,4,6]

console.log(
    arr.forEach(function(i){
        return i+i;
    })
    //接不起来，断了
    .sort()
);//TypeError: Cannot read property 'sort' of undefined

最后

根据上面的代码，大家应该了解到.forEach()跟.map()的局限。

最后，感谢大家耐心的阅读，排个序

.map() > .forEach() > for()

英文原文

https://ryanpcmcquen.org/javascript/2015/10/25/map-vs-foreach-vs-for.html

    原文作者：sutaking
    原文地址: https://segmentfault.com/a/1190000007627597
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞