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

数组操作forEach和map

forEach和map的相同点

1、都是循环遍历数组中的每一项
2、入参匿名函数都支持三个参数,当前项item,当前项索引index,原始数组arr;匿名函数中的this都指向window
3、都可以通过return跳过本次循环
4、都无法通过使用 break 语句来中断循环。 break 语句用于中断循环的功能只适用于 for 循环或 while 循环
5、可以用try catch包裹实现跳出循环

第3点代码实现

const array1 = [1, 2, 3, 4, 5];let sum1 = 0;array1.forEach((element) => {if (element === 3) {return; // 跳过本次循环}console.log(element); //1,2,4,5sum1 += element;});console.log(sum1); // 输出: 12
const array1 = [1, 2, 3, 4, 5];
let arr4 =array1.map((element) => {if (element === 3) {return //跳过本次循环}console.log(element); //1,2,4,5return element+1});console.log(arr4); // 输出: [2,3,undefined,5,6]

第5点代码实现

let arr2 = [0, 1, "stop", 3, 4];
try {arr2.forEach(element => {if (element === "stop") {throw new Error("forEachBreak");}console.log(element); // 输出 0 1 后面不输出});
} catch (e) {console.log(e.message); // forEachBreak
};
let arr2 = [0, 1, "stop", 3, 4];
try {arr2.map(element => {if (element === "stop") {throw new Error("forEachBreak");}console.log(element); // 输出 0 1 后面不输出});
} catch (e) {console.log(e.message); // forEachBreak
};

forEach和map的区别

1、map有返回值,会分配内存空间。返回一个和原数组长度一致的新数组,可以进行链式操作;forEach没有返回值,无法进行链式调用

是否改变原始数组

基础数据类型
forEach不会改变

const array = [1, 2, 3, 4];
array.forEach(item => {item = item + 1
})
console.log(array); // [1,2,3,4]

map不会改变

const array = [1, 2, 3, 4];
array.map(item => {item = item + 1
})
console.log(array); // [1,2,3,4]

引用数据类型
forEach会改变

        const arr = [{name: 'shaka',age: 23}, {name: 'virgo',age: 18}]arr.forEach(item => {if (item.name === 'shaka') {item.age = 100}})console.log(arr); //[{name: 'shaka', age: 100}, {name: 'virgo', age: 18}]

map会改变

        const arr = [{name: 'shaka',age: 23}, {name: 'virgo',age: 18}]arr.map(item => {if (item.name === 'shaka') {item.age = 100}})console.log(arr); //[{name: 'shaka', age: 100}, {name: 'virgo', age: 18}]

结论:如果操作数组项item改变,对于数组项目是基础数据类型的,forEach和map都不会改变原数组;对于数组项目是引用数据类型的,forEach和map都会改变原数组;
数组项目是基础数据类型的可以通过遍历+访问数组下标来改变原始数组

const array = [1, 2, 3, 4];
array.forEach((item,index) => {array[index] = item + 1
})
console.log(array); // [2,3,4,5]const array = [1, 2, 3, 4];
array.map((item,index) => {array[index] = item + 1
})
console.log(array); // [2,3,4,5]

参考:
链接: link

链接: link

http://www.lryc.cn/news/392459.html

相关文章:

  • 流式处理应用场景与流式计算处理框架选择建议
  • 2024年软件测试岗必问的100+个面试题【含答案】
  • A4-C四驱高防轮式巡检机器人
  • Https网站如何申请免费的SSL证书及操作使用指南
  • 实现资产优化管理:智慧校园资产分类功能解析
  • 大厂开发必知必会:Devops、CI/CD、流水线和Paas的关系解析说明
  • Qt学习:Qt窗口组件以及窗口类型
  • 基于AGX ORIN与FPGA K7实现PCIE高速数据通信/Orin与FPGA高速数据传输/XDMA在linux系统使用教程
  • Vue3:全局播放背景音乐
  • 2024年07月03日 Redis部署方式和持久化
  • 成都仅需浏览器即可快速查看的数据采集监控平台!
  • LLM - 神经网络的训练过程
  • 【全网最全ABC三题完整版】2024年APMCM第十四届亚太地区大学生数学建模竞赛(中文赛项)完整思路解析+代码+论文
  • Python | Leetcode Python题解之第213题打家劫舍II
  • 揭秘数据之美:【Seaborn】在现代【数学建模】中的革命性应用
  • 【宠粉赠书】UML 2.5基础、建模与设计实践
  • Python中几个重要的集合
  • 【JS】纯web端使用ffmpeg实现的视频编辑器-视频合并
  • 解决Python用xpath爬取不到数据的一个思路
  • C#面:如何把一个array复制到arrayist里
  • 解决前后端同一个端口跨域问题
  • 《C语言》认识数据类型和理解变量
  • 【ARM 常见汇编指令学习 7.1 -- LDRH 半字读取指令】
  • C++期末整理
  • 技术派Spring事件监听机制及原理
  • 秋招突击——设计模式补充——简单工厂模式和策略模式
  • SwiftUI中List的liststyle样式及使用详解添加、移动、删除、自定义滑动
  • PostgreSQL的系统视图pg_stats
  • UML2.0-系统架构师(二十四)
  • leetcode 152. 乘积最大子数组「贪心」「动态规划」