JS中map与forEach的区别
很多同学可能对于map与forEach的区别不是太了解,今天我们介绍一下JS中的map与forEach方法,
我对map的理解是,这个方法对一个数组arr1中的每一个元素进行遍历(传递给一个数组,参数为(item,index,arr1)),返回值保存到另一个数组中,遍历结束后,整个方法返回这个数组
map与forEach其实都是JS中,对array进行遍历的方法,区别在于map是存在返回值的,而forEach返回值为undefined
接下来我们来看map代码实例
let L1 = [1, 4, 7, 11]
let res1 = L1.map((item, index, arr) => {
console.log(item); //该参数为遍历的元素本身
console.log(index); //该参数为遍历的元素的下标
console.log(arr); //该参数为原数组本身
return item + 2 //返回值会作为储存到另一个数组当作总体的返回值
})
console.log(res1);
console.log(L1);
输出为下图。可以看到,map方法确实有返回值,用res1接收后输出为修改过的数组。
map接收的函数有三个参数,可以只写一个两个,也可以三个都写,但是要注意先后顺序。
然后我们来看forEach代码实例
let L1 = [1, 4, 7, 11]
let res1 = L1.forEach((item, index, arr) => {
console.log(item);
console.log(index);
console.log(arr);
return item + 2
})
console.log(res1);
console.log(L1);
输出为下图。可以看到,forEach方法无返回值,用res1接收后输出undefined,但是细心的同学可能发现了,为什么对item进行了return,但是L1数组依旧没有变化呢?那是因为对于forEach也是不能修改原数组的,如果需要修改原数组,可以使用索引进行修改
let L1 = [1, 4, 7, 11]
let res1 = L1.forEach((item, index, arr) => {
console.log(item);
console.log(index);
console.log(arr);
arr[index] += 1
})
console.log(res1);
console.log(L1);
输出为:
但是forEach作为ES5提出的方法,性能异常的差
所以大家如果是想对数组进行遍历输出之类简单的操作,可以使用forEach,但是想批量修改数组值,推荐使用map方法
JS中map与forEach的区别的更多相关文章
- JS中map和foreach的区别以及some和every的用法
一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...
- JS中Map和ForEach的区别
定义 forEach()方法: 针对每一个元素执行提供的函数. map()方法: 创建一个新的数组,其中每一个元素由调用数组中的每一个元素执行提供的函数得来. 区别 forEach()方法不会返回执行 ...
- JS中map()与forEach()的区别和用法
相同点: 1.都是循环遍历数组中的每一项 2.每次执行匿名函数都支持三个参数,参数分别为item(当前每一项),index(索引值),arr(原数组) 3.匿名函数中的this都是指向window 4 ...
- JavaScript中Map和ForEach的区别
译者按: 惯用Haskell的我更爱map. 原文: JavaScript — Map vs. ForEach - What’s the difference between Map and ForE ...
- ES5中, map 和 forEach的区别
forEach和map区别在哪里知道吗? // forEach Array.prototype.forEach(callback(item, index, thisArr), thisArg) // ...
- JS中map、forEach、filter、reduce等Array新增方法的区别
数组在各个编程语言中的重要性不言而喻,但是在之前的JavaScript中数组虽然功能已经很强大,但操作方法并不完善,在ECMAScript5中做了适当的补充. Array.isArray(elemen ...
- JS中for和forEach的区别
https://thejsguy.com/2016/07/30/javascript-for-loop-vs-array-foreach.html
- Js中Map对象的使用
Js中Map对象的使用 1.定义 键/值对的集合. 2.语法 mapObj = new Map() 3.备注 集合中的键和值可以是任何类型.如果使用现有密钥向集合添加值,则新值会替换旧值. 4.属性 ...
- 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie,Session,Application的用法与区别? c#反射 抽象工厂
浅谈JS中的!=.== .!==.===的用法和区别 var num = 1; var str = '1'; var test = 1; test == num //tr ...
随机推荐
- 成功填坑! Java引入QQ登录时,AccessToken [accessToken=, expireIn=];
主要就是会一直进入下面这一行,也就是accessTokenObj.getAccessToken().equals("") 此时前端显示如下 AccessToken [accessT ...
- 测试工具Fiddler(一)—— 基础知识
Fiddler基础知识 一.Fiddler是什么? Fiddler是一个http协议调试代理工具,它能够记录客户端和服务器之间的所有 HTTP请求,可以针对特定的HTTP请求,分析请求数据.设置断点. ...
- 01.flask pycharm开启debug模式
代码照旧
- MySQL军规升级版(转)
一.基础规范 表存储引擎必须使用InnoDB 表字符集默认使用utf8,必要时候使用utf8mb4 解读:(1)通用,无乱码风险,汉字3字节,英文1字节(2)utf8mb4是utf8的超集,有存储4字 ...
- 看透Spring MVC:源代码分析与实践 (Web开发技术丛书)
第一篇 网站基础知识 第1章 网站架构及其演变过程2 1.1 软件的三大类型2 1.2 基础的结构并不简单3 1.3 架构演变的起点5 1.4 海量数据的解决方案5 1.4.1 缓存和页面静态化5 1 ...
- Ubuntu学习之路1
最近重装了系统,对自己很久的win7 say goodBye.学习了自制U盘系统盘,重装了win8,然后在win8上倒腾,发现还是不错的.于是又在win8上装回了win7上的VMware,捣鼓了一下U ...
- qt中的拖拽及其使用技巧
关于qt中的拖放操作,首先可以看这篇官方文档:http://doc.qt.io/qt-5.5/dnd.html 一.QDrag 首先是创建QDrag,可以在mousePressEvent或者mouse ...
- 个人第四次作业Alpha2版本测试~顾毓
个人第四次作业Alpha2版本测试 这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/GeographicInformationScience/ 这个作业要 ...
- jQuery学习总结(三)
这篇文章讲的是jQuery里的ajax发送data的三种方式,利用ajax发送数据的好处是把数据发送到了servlet后,当前页面不进行跳转. jQuery的里的ajax发送data的方式主要有三种, ...
- Thumb.db看不到的问题
今天读取数据集的时候总是会读到一个Thumb.db的缩略图文件,点开查看选项里面的显示隐藏文件.文件夹处于勾选状态,此时文件夹中并不存在此文件. 解决方案: 勾选掉隐藏受保护的操作系统文件即可.