.map() vs .forEach() vs for() 如何选择?
.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
.map() vs .forEach() vs for() 如何选择?的更多相关文章
- JavaScript 中 map、foreach、reduce 间的区别
一直对map.foreach.reduce这些函数很是生疏,今天看underscorejs时好好研究了一下,一研究我就更懵了,这不是一样嘛,都是遍历,所以我就去知乎找了一下,整理出了比较好的几个说法. ...
- 【Javascript】JS遍历数组的三种方法:map、forEach、filter
前言 近一段时间,因为项目原因,会经常在前端对数组进行遍历.处理,JS自带的遍历方法有很多种,往往不加留意,就可能导致知识混乱的现象,并且其中还存在一些坑.前端时间在ediary中总结了js原生自带的 ...
- java8 list和map的forEach
list forEach示例 public class HelloWorld { public static void main(String[] args) { List<User> l ...
- JavaScript中Map和ForEach的区别
译者按: 惯用Haskell的我更爱map. 原文: JavaScript — Map vs. ForEach - What’s the difference between Map and ForE ...
- Javascript的map与forEach的区别
原理: 高级浏览器支持forEach方法语法:forEach和map都支持2个参数:一个是回调函数(item,index,list)和上下文: forEach:用来遍历数组中的每一项:这个方法执行是没 ...
- 000 list与map的foreach使用
一:list的使用 1.程序 package com.jun.it.java8; import java.util.ArrayList; import java.util.List; public c ...
- JS中map与forEach的区别
很多同学可能对于map与forEach的区别不是太了解,今天我们介绍一下JS中的map与forEach方法, 我对map的理解是,这个方法对一个数组arr1中的每一个元素进行遍历(传递给一个数组,参数 ...
- ES5中, map 和 forEach的区别
forEach和map区别在哪里知道吗? // forEach Array.prototype.forEach(callback(item, index, thisArr), thisArg) // ...
- 《ES6基础教程》之 map、forEach、filter indexOf 用法
1,map,对数组的每个元素进行一定操作,返回一个新的数组. var oldArr = [{first_name:"Colin",last_name:"Toh" ...
随机推荐
- 分布式系统下的CAP定理
本文参考EricBrewer博客加上自己的理解整理. CAP定理又被成为布鲁尔定理,是加州大学计算机科学家埃里克·布鲁尔提出来的猜想,后来被证明成为分布式计算领域公认的定理. CAP定义,在高并发的场 ...
- IIS部署vue项目页面刷新404,url重写问题解决办法
这里需要用到URL重写工具 --URL Rewrite(默认没有,需要自己下载安装) 如果IIS上默认有安装Web平台安装程序,我们可以使用平台自动安装URL Rewrite重写工具,打开IIS在管理 ...
- JZ-008-跳台阶
跳台阶 题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果) 题目链接: 跳台阶 代码 public class Jz08 { ...
- 图解机器学习 | LightGBM模型详解
作者:韩信子@ShowMeAI 教程地址:http://www.showmeai.tech/tutorials/34 本文地址:http://www.showmeai.tech/article-det ...
- git flow 工作流程以及常用命令
一.分支介绍 master 也是产品分支,只有一个,一般情况下不会在这个分支上进行代码操作 develop 只有一个,新特性的开发是基于 develop 开发的,但是不能直接在 develop 上进行 ...
- x86-7-页式管理(Paging)
x86-7-页式管理(Paging) 页式管理是重中之重! 在段式管理下操作系统的运作出现了很多问题,因为段的长度不定,在分配内存时,可能会发生内存中的空闲区域小于要加载的段,或者空闲区域远远大于要加 ...
- ArcMap操作随记(6)
1.上流汇流区 [填洼]→[流向]→[分水岭] 2.输入坐标进行移动,也就是精确移动 [移动]工具(在自定义中,其中的[旋转]工具也有类似效果) 3.找最近的要素(矢量) [近邻分析]→[汇总] 4. ...
- Caffeine缓存详解
概要 Caffeine是一个高性能,高命中率,低内存占用,near optimal 的本地缓存,简单来说它是 Guava Cache 的优化加强版,有些文章把 Caffeine 称为"新一代 ...
- 如何解决代码中if/else 过多的问题
前言 if...else 是所有高级编程语言都有的必备功能.但现实中的代码往往存在着过多的 if...else.虽然 if...else 是必须的,但滥用 if...else 会对代码的可读性.可维护 ...
- First Note
第一篇博客 入驻博客园.