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

访问原文地址javascript

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

笔者说,本身基本没怎么用过for()来遍历,主要是用.forEach()html

可是老是会被不少朋友说,这些人认为for()的速度要比.forEach()快一点。(其实这根本没有根据,下面会讲)java

速度固然是很重要的,可是咱们也须要从其余方面考虑一下,特别是代码资源。编程

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

这样,又回到了老问题,是用空间换速度,仍是反之?jsp

固然,都很重要。首先,这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()在执行完遍历以后会把il这两个元素挂起来,这让咱们须要手动增长一些代码去清除他们所占用的内存。

因此,这时候能够告诉你的朋友:

.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

相关文章
相关标签/搜索