JS中的map()和forEach()有什么区别?
在前端项目中,我们经常需要处理后台返回的数据,需要对response的数据进行遍历,循环。JavaScript中一些最受欢迎的功能可能是map和forEach。从ECMAScript 5(简称es5)开始,它们就开始存在了。
目录
1.什么是map()和forEach()?
2.forEach
3.map
4.总结
1.什么是map()和forEach()?
map 和 forEach 是数组中的帮助器方法,可以轻松地在数组上循环。我们曾经像下面这样使用for循环遍历一个数组,没有任何辅助函数。
var array = ['1', '2', '3'];
for (var i = 0; i < array.length; i += 1) { console.log(Number(array[i]));
}
// 1
// 2
// 3
自JavaScript时代开始以来,就一直存在 for 循环。它包含3个表达式:初始值,条件和最终表达式。
这是循环数组的经典方法。从ECMAScript 5开始,新功能似乎使我们更加快乐。
2.forEach
Array在ES5新增的方法中,参数都是function类型,默认有传参,forEach方法中的function回调支持3个参数,第1个是遍历的数组内容;第2个是对应的数组索引,第3个是数组本身。
[数组数据].forEach(function(value, index, array) {// ...
});
3.map
map 的作用与 for 循环完全相同,只是 map 会创建一个新数组,其结果是在调用数组中的每个元素上调用提供的函数。
它需要两个参数:一个是稍后在调用 map 或 forEach 时调用的回调函数,另一个是回调函数被调用时使用的名为 thisArg 的上下文变量。
这里的map不是“地图”的意思,而是指“映射”。[].map(); 基本用法跟forEach方法类似:
const arr = ['1', '2', '3'];
// 回调函数接受3个参数
// 数组的当前值作为第一个参数
// 当前值在数组中的位置作为第二个参数
// 原始源数组作为第三个参数
const cb = (str, i, origin) => { console.log(`${i}: ${Number(str)} / ${origin}`);
};
arr.map(cb);
// 0: 1 / 1,2,3
// 1: 2 / 1,2,3
// 2: 3 / 1,2,3
回调函数可以如下使用。
arr.map((str) => { console.log(Number(str)); })
map 的结果不等于原始数组。
const arr = [1];
const new_arr = arr.map(d => d); arr === new_arr; // false
- 还可以将对象作为 thisArg 传递到map。
const obj = { name: 'Jane' }; [1].map(function() { // { name: 'Jane' } console.dir(this);
}, obj); [1].map(() => { // window console.dir(this);
}, obj);
对象 obj 成为 map 的 thisArg。但是箭头回调函数无法将 obj 作为其 thisArg。
这是因为箭头函数与正常函数不同。
.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
4.总结
综上所述,我建议你在创建一个新的数组时使用map,当你不需要制作一个新的数组,而是要对数据做一些事情时,就使用forEach。
有人提到 说map 比 forEach 的执行速到要快。
该代码看起来非常相似,但结果却相反。有些测试说 forEach 更快,有些说 map 更快。也许你在告诉自己 map/forEach 比其他的快,你可能是对的。老实说,我不确定。
但可以肯定的是——两者都比JavaScript内置的 for 循环慢。
JS中的map()和forEach()有什么区别?相关推荐
- html5有foreach吗,JavaScript中的map()和forEach()有什么区别?
来源:https://medium.com/better-programming,作者:Moon,翻译:公众号<前端全栈开发者> JavaScript中一些最受欢迎的功能可能是map和fo ...
- js中数组map方法的使用和实现
js中数组map方法的使用和实现 MDN中定义 map() 方法创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值. 语法 var new_array = arr.map(fun ...
- vue前端弹出新增页面testAdd,弹出页面中进行数据编辑,table编辑,行编辑等。包含JS中使用Map进行数据处理。
使用vue写的新增页面,编辑页面等弹出页面,在页面中进行table数据的行编辑,利用JS中的Map做的实时响应的行编辑数据内容汇总计算.校验等.话不多说,上代码: require(['vue', 'z ...
- Dart 流中的 listen 和 forEach 有什么区别?
stream - Dart 流中的 listen 和 forEach 有什么区别? 如果我有 Stream在 Dart 中,我可以同时使用 listen和 forEach ,但我不明白其中的区别. 因 ...
- css里面的let,js中let和var定义变量的区别
javascript 严格模式 第一次接触let关键字,有一个要非常非常要注意的概念就是"javascript 严格模式",比如下述的代码运行就会报错: let hello = ' ...
- js中的typeof 与typescript typeof的区别
js中的typeof 与typescript typeof的区别 在 JavaScript 中,typeof 是一个运算符,用于返回一个值的数据类型.它可以返回下列字符串中的一个: "und ...
- JS中find(), findIndex(), filter(), forEach(), some(), every(), map()方法
1. find()与findIndex() find()方法,用于找出第一个符合条件的数组成员.它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该 ...
- jquery中的map()方法与js中的map()方法
1.jquery中的map()方法 首先看一个简单的实例: $("p").append( $("input").map(function(){ return $ ...
- js中innerHTML与innerText的用法与区别【转自http://blog.sina.com.cn/johnpu】
用法:SupeSite/X-Space官方站%x-ZP$k?'DWZ_{ SupeSite/X-Space官方站K?_/T9s3^QJ a4X <div id="test"& ...
- html事件中写js,html标签中绑定触发事件与js中绑定触发事件写法上的区别
html> js中方法名后加括号和不加口号的区别 按钮 var test = function(){ var span = document.createElement("span&q ...
最新文章
- 织梦后台不显示验证码的解决
- 当美团遇上双11,给千亿医美市场带来更大想象空间
- Java中BigDecimal解决精度丢失问题
- 自己整理的openresty安装步骤
- c语言链表复数实验,数据结构实验—复数计算器 大神提意见
- 【牛客 - 2B】树(思维,dp,有坑)
- Java基础学习总结(158)——开发Leader如何做CodeReview
- pcap封包修改服务器数据,tcprewrite批量修改pcap数据报文
- 陈天奇的tvm更新了:VTA,开源AI芯片栈
- PHP APM 对比评测:OneAPM, New Relic, 听云
- 个人管理 - 我是这样偷着做架构的
- SLIC超像素分割详解(一):简介
- php实现mysql查询_PHP如何实现MYSQL查询功能
- 2020年中华人民共和国行政区划代码
- 《动态壁纸 : 手机壁纸大全》EULA条款协议
- php 上周日期,php获取本周和上周的开始日期和结束日期
- Shell(Bash)输入一个IP 判断是否可用并进行ping 测试
- 2022科技公司薪酬排行榜,来了!
- Android Studio连接mysql8.0.25经验贴(三天血与泪的教训)
- BackTrack 5 R3 Released