js中map和forEach的区别

最新推荐文章于 2025-05-09 14:18:00 发布

Alley_h.

最新推荐文章于 2025-05-09 14:18:00 发布

阅读量251

点赞数

CC 4.0 BY-SA版权

文章标签： js

本文链接：https://blog.youkuaiyun.com/weixin_47794734/article/details/119827658

本文详细介绍了JavaScript中的forEach()和map()方法，包括它们的定义、区别和使用示例。forEach()适合不改变数据仅执行操作的情况，而map()则用于创建新数组并返回。在示例中，展示了如何使用这两个方法来计算数组元素的平方。对于不需要返回新数组的场景，forEach()是合适的选择；当需要转换数组时，map()更优，且能与其他数组方法如filter()组合使用。总结来说，虽然两者功能相似，但map()提供了新数组并更适合数据变换操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义

foreEach()方法:
针对每一个元素执行提供的函数。
map()方法:
创建一个新的数组，其中每一个元素由调用数组中的每一个元素执行提供的函数得来

区别

forEach()方法不会返回执行结果，而是undefined。也就是说，forEach()会修改原来的数组。而map()方法会得到一个新的数组并返回。

例子

制作一个数组的平方
有如下一个数组

let arr =[1,2,3,4,5,6]

下面分别用forEach()和Map()

forEach()
注意，forEach是不会返回有意义的值的。
我们在回调函数中直接修改arr的值。

arr.forEach((value, key) => {
 return arr[key] = value * value;
});

执行结果如下：

在这里插入图片描述
map（）

let list = arr.map(value => {
 return value * value;
});

执行结果如下：
在这里插入图片描述

具体使用

forEach适合于你并不打算改变数据的时候，而只是想用数据做一些事情 – 比如存入数据库或则打印出来。

let arr = ['a', 'b', 'c', 'd'];
arr.forEach((letter) => {
 console.log(letter);
});
// a
// b
// c
// d

map()适用于你要改变数据值的时候。不仅仅在于它更快，而且返回一个新的数组。这样的优点在于你可以使用复合(composition)(map(), filter(), reduce()等组合使用)来玩出更多的花样。

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(value => value * value).filter(value => value > 10);
// arr2 = [16, 25]

总结

forEach()可以做到的东西，map()也同样可以。反过来也是如此。

map()会分配内存空间存储新数组并返回，forEach()不会返回数据。

forEach()允许callback更改原始数组的元素。map()返回新的数组。