js中map和forEach的区别

最近在写项目中发现如果想要对一个数组进行操作经常会用到遍历的方式，在用到遍历的方式的时候经常用到的有map和forEach方法，下面结合我查阅的资料和自己项目中的体会谈谈二者的区别。

首先map方法：

map对一个数组对象进行操作时，一般是生成一个新的数组，可以在map中限制生成新数组的条件，有返回值

forEach方法：

forEach方法一般是对原有的数组进行操作，没有返回值

示例

下方提供了一个数组，如果我们想将其中的每一个元素翻倍，我们可以使用map和forEach来达到目的。

?

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

ForEach

注意，forEach是不会返回有意义的值的。

我们在回调函数中直接修改arr的值。

?

1 2 3

arr.forEach((num, index) => {   return arr[index] = num * 2; });

执行结果如下：

?

1	// arr = [2, 4, 6, 8, 10]

Map

?

1 2 3

let doubled = arr.map(num => {   return num * 2; });

执行结果如下：

?

1	// doubled = [2, 4, 6, 8, 10]

执行速度对比

jsPref是一个非常好的网站用来比较不同的JavaScript函数的执行速度。

这里是forEach()和map()的测试结果：

可以看到，在我到电脑上forEach()的执行速度比map()慢了70%。每个人的浏览器的执行结果会不一样。

哪个更好呢？

取决于你想要做什么。

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

?

1 2 3 4 5 6 7 8

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

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

?

1 2 3

let arr = [1, 2, 3, 4, 5]; let arr2 = arr.map(num => num * 2).filter(num => num > 5); // arr2 = [6, 8, 10]

我们首先使用map将每一个元素乘以2，然后紧接着筛选出那些大于5的元素。最终结果赋值给arr2。

核心要点

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

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

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