JS中地图和ForEach的区别

如果你有使用JavaScript的经验，你可能已经知道这两个看似相同的方法：Array.prototype.map()和Array.prototype.forEach()。

那么，它们之间有什么区别呢？

定义

我们先来看看MDN上Map和ForEach的定义：

forEach():为每个数组元素执行一次提供的函数。

Map():创建一个新数组，其中每个元素都是通过调用数组中的每个元素来执行提供的函数而获得的(创建一个新数组，结果是调用数组中的每个元素都调用了提供的函数)。

有什么区别？forEach()方法不返回执行结果，但未定义。也就是说，forEach()修改了原始数组。map()方法获取一个新数组并返回。

示例

下面有一个数组。如果我们想让其中的每个元素都翻倍，我们可以使用map和forEach来实现目标。

让arr=[1，2，3，4，5]；为每一个

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

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

arr.forEach((num，index)={ return arr[index]=num * 2；});实施结果如下：

//arr=[2，4，6，8，10]地图

let double=arr . map(num={ return num * 2；});实施结果如下：

//翻倍=[2，4，6，8，10]执行速度比较

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

以下是forEach()和map()的测试结果：

你可以看到forEach()比我电脑上的map()慢了70%。每个浏览器的结果会有所不同。您可以使用以下链接来测试： Map与forEach-jsPref。

JavaScript太聪明了(gui)活不了(yi)，你也不知道有没有BUG。你不妨访问Fundebug在线实时监控。

对功能角度的理解

如果你习惯了编程，你肯定喜欢用map()。因为forEach()会改变原数组的值，map()会返回一个全新的数组，所以原数组不会受到影响。

哪个更好？

这取决于你想做什么。

ForEach适用于您不打算更改数据，而只想对数据做一些事情的情况，例如，将其保存在数据库中或打印出来。

让arr=['a '，' b '，' c '，' d ']；arr.forEach((字母)={ console.log(字母)；});//a//b//c//dmap()在您想要更改数据值时适用。它不仅速度更快，而且还会返回一个新数组。这样做的好处是可以使用composition (map()、filter()、reduce()等。)玩更多的把戏。

让arr=[1，2，3，4，5]；让arr2=arr.map(num=num * 2)。过滤器(num=num 5)；//arr2=[6，8，10]我们首先用map将每个元素乘以2，然后过滤掉那些大于5的元素。最终结果分配给arr2。

核心要点

Map()可以做forEach()可以做的事情。反之亦然。

Map()将分配内存空间来存储新数组并返回它，而forEach()将不返回数据。

ForEach()允许回调改变原始数组的元素。Map()返回一个新数组。