JavaScript map vs. forEach：分别什么时候使用

在本文中，我们将讨论 javascript 中的map和forEach方法，我们还将通过它们之间的差异来了解何时使用它们。

JavaScript 是 Web 的核心技术之一。大多数网站都使用它，所有现代网络浏览器都支持它，无需插件。在本系列中，我们将讨论有助于您进行日常 javaScript 开发的不同技巧和窍门。

作为日常 JavaScript 开发的一部分，您经常需要使用数组。而且在处理数组时，经常需要处理数组元素，因此需要一种方法来循环遍历数组的每个元素。在 JavaScript 中，forEach它map是处理数组的两种最流行的方法。这两种方法的主要目的是遍历数组。尽管它们看起来几乎相同，但它们之间存在某些差异。map用于转换数组的每个元素，而forEach用于在不更改数组的情况下对每个元素运行函数。

在这篇文章中，我们将讨论这两种方法以及几个实际示例。最后，我们还将讨论这两种方法之间的区别。到最后，你会更好地理解何时使用每一个。

forEach方法_

该forEach方法允许您通过遍历数组的每个元素来执行函数。重要的是要注意该forEach方法不返回任何内容，因此，如果您尝试获取该forEach方法的返回值，您将得到undefined. 相反，它允许您通过对数组的每个元素应用回调函数来修改现有数组的值。由于它允许您修改源数组本身，因此它是一个 mutator 方法。

让我们快速看一下以下示例，以了解该forEach方法的工作原理。

如您所见，我们正在计算数组中所有元素的平方。对每个元素调用该forEach方法，并记录其平方。该辅助方法的返回值被忽略，原始数组不变。的返回值forEach始终是undefined。

map方法_

该map方法与该方法非常相似forEach——它允许您为数组的每个元素执行一个函数。但不同的是，map 方法使用此函数的返回值创建了一个新数组。map通过对源数组的每个元素应用回调函数来创建一个新数组。由于map不改变源数组，我们可以说它是一个不可变的方法。

让我们用对应的地图修改我们在上一节中讨论的示例。

如您所见，numberArray数组保持不变，但返回值map是一个新数组，它是通过将 square 函数应用于数组的每个元素而构建的。

map 函数的一大优点是它是可链接的。这意味着您可以连续调用多个映射操作。这是一个链接示例，我们将每个数字乘以 2，将它们转换为字符串，然后在每个数字上加上一个美元符号。

map和forEach方法之间的区别

map和之间的主要区别在于forEach，该map方法通过对数组的每个元素应用回调函数来返回一个新数组，而该forEach方法不返回任何内容。

您可以使用该forEach方法来改变源数组，但这并不是它的真正用途。相反，当您需要对数组的每个元素执行一些操作时，它非常有用。

另一方面，该map方法用于创建一个新数组，因此它是可链接的。您可以一个接一个地调用多个映射操作。

该forEach方法不返回任何内容，因此您不能将它与任何其他方法链接起来——它不可链接。

我应该使用哪一个，map或者forEach？

现在，归结为这个问题：你应该如何决定是否使用maporforEach方法？

如果您打算通过应用函数来更改数组元素，则应该使用该map方法，因为它不会修改原始数组并返回一个新数组。这样，原始数组保持不变。另一方面，如果您想遍历数组的所有元素并且不需要返回的数组，请使用该forEach方法。

除此之外，功能非常相似。

结论

今天，我们讨论了 JavaScript 中两个有用的方法：map和forEach. 我们经历了它们之间的差异，以及几个真实世界的例子。