访问原文地址

.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()在执行完遍历之后会把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

.map() vs .forEach() vs for() 如何选择?的更多相关文章

  1. JavaScript 中 map、foreach、reduce 间的区别

    一直对map.foreach.reduce这些函数很是生疏,今天看underscorejs时好好研究了一下,一研究我就更懵了,这不是一样嘛,都是遍历,所以我就去知乎找了一下,整理出了比较好的几个说法. ...

  2. 【Javascript】JS遍历数组的三种方法:map、forEach、filter

    前言 近一段时间,因为项目原因,会经常在前端对数组进行遍历.处理,JS自带的遍历方法有很多种,往往不加留意,就可能导致知识混乱的现象,并且其中还存在一些坑.前端时间在ediary中总结了js原生自带的 ...

  3. java8 list和map的forEach

    list forEach示例 public class HelloWorld { public static void main(String[] args) { List<User> l ...

  4. JavaScript中Map和ForEach的区别

    译者按: 惯用Haskell的我更爱map. 原文: JavaScript — Map vs. ForEach - What’s the difference between Map and ForE ...

  5. Javascript的map与forEach的区别

    原理: 高级浏览器支持forEach方法语法:forEach和map都支持2个参数:一个是回调函数(item,index,list)和上下文: forEach:用来遍历数组中的每一项:这个方法执行是没 ...

  6. 000 list与map的foreach使用

    一:list的使用 1.程序 package com.jun.it.java8; import java.util.ArrayList; import java.util.List; public c ...

  7. JS中map与forEach的区别

    很多同学可能对于map与forEach的区别不是太了解,今天我们介绍一下JS中的map与forEach方法, 我对map的理解是,这个方法对一个数组arr1中的每一个元素进行遍历(传递给一个数组,参数 ...

  8. ES5中, map 和 forEach的区别

    forEach和map区别在哪里知道吗? // forEach Array.prototype.forEach(callback(item, index, thisArr), thisArg) // ...

  9. 《ES6基础教程》之 map、forEach、filter indexOf 用法

    1,map,对数组的每个元素进行一定操作,返回一个新的数组. var oldArr = [{first_name:"Colin",last_name:"Toh" ...

随机推荐

  1. Go基础知识梳理(三)

    Go基础知识梳理(三) 结构 type Person struct { name string sex int } func main() { //推荐写法 person := Person{ nam ...

  2. zabbix--客户端部署(新手入门)

    zabbix--客户端部署 机器环境部署:我准备的一台zabbix客户端#可以准备多台 ip: 安装软件包 [root@server1 ~]# rpm -Uvh https://repo.zabbix ...

  3. 【python】kNN基础算法--分类和推荐系统

    (1)k-近邻算法是分类数据最简单最有效的方法. (2)在将数据输入到分类器之前,必须将待处理数据的格式改变为分类器可以接受的格式. (3)所有的推荐模型都可以使用这个算法,只要将结果量化就行了,主要 ...

  4. MySQL 中如何归档数据

    归档,在 MySQL 中,是一个相对高频的操作. 它通常涉及以下两个动作: 迁移.将数据从业务实例迁移到归档实例. 删除.从业务实例中删除已迁移的数据. 在处理类似需求时,都是开发童鞋提单给 DBA, ...

  5. 彩色建模(四色原型) Object Modeling in Color学习心得

    定义4种类的原型,在UML中用不同颜色表示不同原型的对象     1. Party, Place, Thing Party: 事件的参与方,例如某人人.某组织等 Place: 事件的发生地,例如仓库. ...

  6. 微信小程序文件上传结合lin ul

    html <l-form name="goods" l-form-btn-class="l-form-btn-class" bind:linsubmit= ...

  7. Lua中如何实现类似gdb的断点调试—08支持通过包名称添加断点

    在前一篇中我们支持了通过函数名称来添加断点,我们同时也提到了在Lua中一个函数的名称的并不是确定的.准确的说,Lua中的函数并没有名称,所谓名称其实是保存这个函数值的变量的名称. 于是通过函数名称添加 ...

  8. 10、mysql的调优

    mysql的调优 调优的最终目的:节省系统资源.提高响应速度下面从6个维度对mysql进行优化. 第一步:对服务器的参数进行调优 通过show profile命令分析,如果sql语句在执行过程中等待时 ...

  9. 道路中心线提取、河道中心线的提取(ArcScan)

    道路中心线的提取,相信大家并不陌生. 道路中心线是道路路线几何设计中的重要特征线,也是道路交通管理中的重要控制线. 街区内的道路应考虑消防车道的通行,道路中心线间的距离不宜大于160米. 今儿个,博主 ...

  10. python学习之matplotlib实战

    import numpy as np def main(): # print("hello") # line import matplotlib.pyplot as plt x = ...