javascript的遍历方法forEach和map的区别
在日常工作中,JavaScript数组的遍历我们肯定都不陌生,最常见的两个便是forEach 和 map。当然还有别的譬如for, for in, for of, reduce, filter, every, some, …这里就重点说一下forEach和map方法。
1、forEach: 针对每一个元素执行提供的函数,是Array原型链上的函数。
Array.prototype.forEach();
//语法
arr.forEach(callback(currentValue [, index [, array]])[, thisArg]);
currentValue:当前值
index:当前索引
array:正在操作的数组
thisArg:当执行回调函数 callback 时,用作 this 的值。
2、map: 创建一个新的数组,其中每一个元素由调用数组中的每一个元素执行提供的函数得来。
forEach方法不会返回执行结果,而是undefined。也就是说,forEach会修改原来的数组,而map方法会得到一个新的数组并返回。下面我们看下具体的例子,同为遍历数组的方法,两者的用法区别在于:
1、forEach()会改变原数组的方法,不会返回有意义的值
let arr = [1, 2, 3, 4, 5];
arr.forEach((num, index) => {
return (arr[index] = num * 2);
});
//执行结果 arr=[2,4,6,8,10]
2、map()方法不会更改原数组,而是返回新的数组;
let arr = [1, 2, 3, 4, 5];
let doubled = arr.map(num => {
return num * 2;
});
//doubled=[2,4,6,8,10]
优缺点
map的执行速度更快,比forEach的执行速度快了70%;
适用场景
forEach适用于你并不打算改变数据的时候,只是想用数据做一些事情–比如存入数据库或者打印出来。
let arr = ['a','b','c']
arr.forEach(item=>{
console.log(item)
})
map适用于你要改变数据值的时候,不仅在于它更快,而且返回一个新的数组,这样可以提高复用性(map(),filter(),reduce())等组合使用
let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(num => num * 2).filter(num => num > 5);
// arr2 = [6, 8, 10]
我们首先使用map将一个元素*2,然后紧接着筛选出那些大于5的元素,最终结果赋值给arr2;
核心要点
用forEach()做到的,map()同样可以,反之亦成立。
map()会分配内存空间存储新数组并返回,forEach()不会返回数组;
forEach()允许callback更改原始数组的元素。而map()返回新的数组;
- 用好CSS的clamp()这个新特性,轻松实现响应式布局,特别是移动端
- 使用搜狐IP地址查询接口获取IP所在城市
- ThinkPHP发布安全更新版本(V6.1.0/V6.0.14),移除对think-filesystem库的依赖
- javasript两个数组元素分别相加
- PHP依据用户当前定位的经纬度判断距离最近的门店
- Unicode15.0标准发布,新增鹅、姜、驴、豌豆等emoji表情
- 开源OA办公系统 — 勾股OA 4.96.16发布,企业办公的卓越选择
- 企业数字化、信息化是发展的必然趋势,常见的企业信息化、数字化系统有哪些?
- IE11将停用并停止支持,此后IE正式谢幕,Edge接棒
- 利用微软的Office Online实现Office文档在线预览功能

