js中map和foreach的用法

最新推荐文章于 2025-10-19 21:18:41 发布

转载最新推荐文章于 2025-10-19 21:18:41 发布 · 722 阅读

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/marryMe_MrsYu/article/details/112246530?utm_medium=distribute.pc_category.none-task-blog-hot-4.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-4.nonecase&request_id=

文章标签：

#js

本文探讨了JavaScript中forEach和map方法在遍历数组时的不同。forEach会直接修改原数组，不返回新数组，而map则创建一个新数组，原数组保持不变。示例代码展示了对于对象数组的操作，forEach会改变每个对象的age属性，而map虽然返回新数组，但原数组同样被修改。在使用时需注意它们对原数组的影响。

foreach的用法
forEach用来遍历数组，可以改变原数组，不会产生新数组。

let arr = [{ name: '老于', age: 18 }, { name: '张三', age: 15 }, { name: '李四', age: 22 }, { name: '王五', age: 25 }, { name: '老朱', age: 12 }]
let arr1 = []
arr1 = arr.forEach(item => {
  item.age = item.age + 5
})
console.log(arr);
console.log(arr1);

输出结果如下：
在这里插入图片描述
可以看到原数组已发生改变，用新数组去接收的话返回的是undefined

map的用法
map函数会产生一个新数组，新数组中的元素为return的返回值，原数组不会发生改变

let arr=[1,2,3,4]
arr.map(item=>{item=item*2})
console.log(arr);

在这里插入图片描述
原数组并没有发生改变，但是大家要记住数组元素只能是字符和数字哦，如果是引用类型，也是会发生改变的

let arr = [{ name: '老于', age: 18 }, { name: '张三', age: 15 }, { name: '李四', age: 22 }, { name: '王五', age: 25 }, { name: '老朱', age: 12 }]
let arr1 = []
arr.map(item => { item.age = item.age + 5})
console.log(arr);
console.log(arr1);