js中map和forEach对比。

引言

为了正确使用操作数组的各个方法,首先要知道值传递和引用传递的概念。这里不详细介绍,在值传递中,任何对参数的修改不会影响原始值,但引用传递会影响原始值。

forEach()

该方法可传入三个参数,第一个为数组的一个元素,第二位为该元素的下标,第三个为原数组。遍历数组并使用传入参数方法,无返回值 。除非循环结束或报错终止,否则forEach方法无法跳出循环。

例子1,forEach()不会改变数组的值。

js 复制代码
let array = [1,2,3,4];
array.forEach((item)=>{
   item+=2;
});

可以看到forEach()不会改变原始数组内的元素,大多数博客也是这么总结的。但开发中,我们通常用到的是对象数组,情况会有所不同。

js 复制代码
let arr = [{key:1},{key:2},{key:3},{key:4},];
arr.forEach((object)=>{
     object.key=object.key+1;
})


可以看到,对象数组里的值改变了。

分析:例子1中,数组存储的是基本数据类型,因此是值传递,而值传递中对参数的修改不会影响原始值。而例子2数组存储的是对象,属于引用传递,可以理解为指针指向的地址并未变化,但地址对应的对象中的属性值value发生了变化,因此导致了数组被修改。

总结

对于网上说的forEach不改变原始数组,可以这样理解:对于基础数据类型来说,forEach不会改变原始数组的值,而对于引用类型来说,不改变原始数组中的key,但是可以改变属性值(value);

map()

map()接收三个参数(item,index,arr),有返回值 ,最终获得一个新的数组,这个新的数组是浅拷贝生成的。例1:对于基础数据类型

js 复制代码
let arr1 =[1,2,3,4];
let newArr1 = arr1.map((item)=>{
     item += 1;
     return item;
});

例子1中,map方法并未改变原始数组中元素的值。再看例子2:对于引用数据类型

js 复制代码
let arr = [{key:1},{key:2},{key:3},{key:4},];
let newArr = arr.map((object)=>{
     object.key=object.key+1;
     return object;
});

对于引用类型数组来讲,map遍历数组,改变了原始数组的属性值。关于基础类型和引用类型的数组,map和forEach的原理基本相似。但map()有返回值,会生成一个新的数组,下面我们探究一下这个生成的新数组与原始数组是否存在关系。例子3:

js 复制代码
let arr1 =[1,2,3,4];
let newArr1 = arr1.map((item)=>{
     item += 1;
     return item;
});
newArr[0]=100;//修改新数组的第一个元素的值。

其实很容易判断,例子1中使用map遍历元素修改值,都未将原始数组元素改变,显然修改新数组里的元素不会影响原始数组。

再看对于引用类型,例子4:

js 复制代码
let arr = [{key:1},{key:2},{key:3},{key:4},];
let newArr = arr.map((object)=>{
     object.key=object.key+1;
     return object;
})
newArr[0].key =100;//修改生成的新数组的第一个对象里的属性

可以看到原始数组的第一个对象里的属性也改变了,新数组属于浅拷贝原始数组。

总结

map与forEach基本相似,不同的是,map遍历有返回值并生成新的数组,而且新数组的生成属于浅拷贝。

相关推荐
Lee川17 小时前
从异步迷雾到优雅流程:JavaScript异步编程与内存管理的现代化之旅
javascript·面试
晴殇i19 小时前
揭秘JavaScript中那些“不冒泡”的DOM事件
前端·javascript·面试
绝无仅有19 小时前
Redis过期删除与内存淘汰策略详解
后端·面试·架构
绝无仅有19 小时前
Redis大Key问题排查与解决方案全解析
后端·面试·架构
AAA梅狸猫20 小时前
Looper.loop() 循环机制
面试
AAA梅狸猫20 小时前
Handler基本概念
面试
Wect21 小时前
浏览器缓存机制
前端·面试·浏览器
掘金安东尼21 小时前
Fun with TypeScript Generics:玩转 TS 泛型
前端·javascript·面试
掘金安东尼21 小时前
Next.js 企业级落地
前端·javascript·面试
掘金安东尼21 小时前
React 性能优化完全指南 2026
前端·javascript·面试