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遍历有返回值并生成新的数组,而且新数组的生成属于浅拷贝。

相关推荐
www_stdio28 分钟前
爬楼梯?不,你在攀登算法的珠穆朗玛峰!
前端·javascript·面试
风止何安啊35 分钟前
🚀别再卷 Redux 了!Zustand 才是 React 状态管理的躺平神器
前端·react.js·面试
白露与泡影36 分钟前
2026年Java面试题目收集整理归纳(持续更新)
java·开发语言·面试
YoungHong19921 小时前
面试经典150题[074]:填充每个节点的下一个右侧节点指针 II(LeetCode 117)
leetcode·面试·职场和发展
Dream it possible!1 小时前
LeetCode 面试经典 150_回溯_全排列(100_46_C++_中等)
c++·leetcode·面试·回溯
LYFlied1 小时前
【每日算法】LeetCode 70. 爬楼梯:从递归到动态规划的思维演进
算法·leetcode·面试·职场和发展·动态规划
YoungHong19922 小时前
面试经典150题[073]:从中序与后序遍历序列构造二叉树(LeetCode 106)
leetcode·面试·职场和发展
regon2 小时前
第九章 述职11 交叉面试
面试·职场和发展·《打造卓越团队》
LYFlied2 小时前
【每日算法】LeetCode 105. 从前序与中序遍历序列构造二叉树
数据结构·算法·leetcode·面试·职场和发展
gis分享者3 小时前
如何在 Shell 脚本中如何使用条件判断语句?(中等)
面试·shell·脚本·语法·使用·判断·条件