当前位置: 首页 > news >正文

js中forEach和map的区别:forEach不会改变原数组,而map会改变数组?错了错了

1.提出思考?forEach不会改变原数组,而map会改变数组?

看到掘金上一篇文章觉得很有意思:大致是描述一般面试官问js中forEach和map的区别?都会回答forEach不会改变原数组,而map会改变,我也一直对百度来的答案当作参考答案。事实证明这个答案是错的

面试:问js的forEach和map的区别 - 掘金

2.forEach()没有返回值,如果使用return会返回undefined;map会返回新数组

 

 3.数组中数据为基本数据类型时,forEach和map都不会改变原数组

// 1、数组为基本数据类型时,forEach和map都不会改变原数组;使用return 返回时,forEach返回undefined,map返回一个处理后的新数组let arr = [1, 2, 3, 4, 5];let arrforEach = arr.forEach((item) => {return item * 2;});console.log(arr);//[1, 2, 3, 4, 5]console.log(arrforEach);//undefinedlet arr1 = [1, 2, 3, 4, 5];let arrMap = arr1.map(item => {return item * 2;});console.log(arr1);// [1, 2, 3, 4, 5]console.log(arrMap);// [2, 4, 6, 8, 10]

4.数据为引用数据类型时,map和forEach都会改变原数组

在使用 forEach 和 map 方法时,对引用类型元素的修改会直接反映在原始数组中。这是因为引用类型的元素实际上存储的是引用(内存地址),而非值本身。因此,通过引用可以访问和修改原始数组中的元素。而number,string,Boolean,null,undefined它们在栈内存中直接存储变量与值

// 2、数组为引用数据类型时,forEach和map都会改变原数组上的对象;使用return时,forEach返回undefined,map返回处理后的数据,未返回的元素返回undefined// 这是因为在使用 forEach 和 map 方法时,对引用类型元素的修改会直接反映在原始数组中。这是因为引用类型的元素实际上存储的是引用(内存地址),而非值本身。因此,通过引用可以访问和修改原始数组中的元素。// 而number,string,Boolean,null,undefined它们在栈内存中直接存储变量与值let arrObj1 = [{username: 'lmf',age: 20},{username: 'yl',age: 30}];let arrObj1ForEach = arrObj1.forEach(item => {if (item.username === 'lmf') return item.age = 100;});console.log(arrObj1);//{username: 'lmf', age: 100} , {username: 'yl', age: 30}console.log(arrObj1ForEach);//undefinedlet arrObj2 = [{username: 'lmf',age: 50},{username: 'yl',age: 60}];let arrObj2Map = arrObj2.map(item => {if (item.username === 'lmf') return item.age = 200;});console.log(arrObj2);//{username: 'lmf', age: 200} , {username: 'yl', age: 60}console.log(arrObj2Map);// [200, undefined]

5.map和forEach循环体内return时影响

return本身就是表示跳出本次循环,进入下次循环。博主说的观点“foreach可以跳出本次循环,return 语句可以在当前回调函数中返回,而map不能,只能遍历完整个数组。”这句话有歧义。

如下例:

其实无论是forEach还是map在return以后本次循环体中,return后的语句都不会执行。sum1和sum2都打印12,区别还是在于return后,map返回新数组的值由return的值决定,而forEach永远只会返回undefined。

  • 如果有return且直接return会返回undefined,如果返回其他值会返回其值;
  • 而forEach返回值永远会返回undefined
// 3、(错误)foreach可以跳出本次循环,return 语句可以在当前回调函数中返回,而map不能,只能遍历完整个数组。// return其实就是跳出本次循环,进行下次循环,区别其实和前面一样的,都是对最后返回的新数组产生影响,如果都定义sum在循环里操作,返回值都会相等const array1 = [1, 2, 3, 4, 5];let sum1 = 0;array1.forEach((element) => {if (element === 3) {return;//这句后面的代码此次循环都不会执行,所以对sum1不会有影响,如果返回'23',那么返回的新数组此元素也会返回'23'}console.log(element); //1,2,4,5sum1 += element;});console.log(newArray1);//undefinedconsole.log(sum1); // 输出: 12console.log("2222222");const array2 = [1, 2, 3, 4, 5];let sum2 = 0;const newArray = array2.map((element) => {if (element === 3) {return;这句后面的代码此次循环都不会执行,所以对sum2不会有影响}console.log(element);// 1,2,4,5sum2 += element;return element * 2;});console.log(sum2);// 12console.log(newArray); // 输出: [2, 4, undefined, 8, 10]

6.map 方法支持链式调用;forEach不支持因为返回的是undefined

        const array3 = [1, 2, 3, 4, 5];const doubledSum = array3.map((element) => element * 2).reduce((accumulator, currentValue) => accumulator + currentValue, 0);console.log(doubledSum); // 输出: 30

7.总结

forEach区别:

  1. forEach无返回值,具体得说是return会返回undefined;map会返回新数组
  2. 数组类型为基本数据类型时,forEach()和map()都不会改变原数组;
  3. 数组类型为引用数据类型时,forEach()和map()都会改变原数组;
  4. 循环体中使用return时,return后的代码都不会执行,只会对循环后的返回值有影响,forEach永远返回undefined,map()会返回return的值;
  5. forEach()不支持链式操作;map()支持链式操作;
http://www.lryc.cn/news/149557.html

相关文章:

  • 深度对话:从底层看Sui设计理念及网络规模扩展
  • 2.单链表练习
  • Wordpress 安装插件和主题报错
  • Spring Cloud 2022.x版本使用gateway和nacos实现动态路由和负载均衡
  • CSS中如何隐藏元素但保留其占位空间(display:none vs visibility:hidden)?
  • 无涯教程-机器学习 - 数据可视化
  • springboot设置日志输出级别
  • buildAdmin的使用笔记
  • RealVNC配置自定义分辨率(AlmaLinux 8)
  • LA@特征值和特征向量的性质
  • Springboot使用kafka事务-生产者方
  • 您的计算机已被.halo勒索病毒感染?恢复您的数据的方法在这里!
  • 生成式AI颠覆传统数据库的十种方式
  • el-date-picker自定义只能选中当前月份和半年内月份等
  • Pyecharts教程(十一):使用Pyecharts绘制带有滑动数据缩放功能的K线图
  • 2023年高教社杯数学建模思路 - 案例:ID3-决策树分类算法
  • POJ 3273 Monthly Expense 二分
  • 图论(基础)
  • docker的运行原理
  • vue自定义键盘
  • k8s 安装 kubernetes安装教程 虚拟机安装k8s centos7安装k8s kuberadmin安装k8s k8s工具安装 k8s安装前配置参数
  • 2023年高教社杯数学建模思路 - 案例:感知机原理剖析及实现
  • OTFS-ISAC雷达部分最新进展(含matlab仿真+USRP验证)
  • Cell | 超深度宏基因组!复原消失的肠道微生物
  • Centos7 设置代理方法
  • Android versions (Android 版本)
  • LNMP 平台搭建(四十)
  • pcie 6.0/7.0相对pcie 5.0的变化有哪些?
  • 百度Apollo:自动驾驶技术的未来应用之路
  • C++之std::distance应用实例(一百八十八)