卡卡网

在 JavaScript 中，forEach和map是两种最流行的处理数组的方法。这两种方法的主要目的是遍历数组。尽管它们看起来几乎相同，但它们之间存在某些差异。在本文中，我们将讨论JavaScript 中的map和forEach方法，我们还将通过它们之间的差异来了解何时使用它们。

forEach方法

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

我们查看以下示例以了解forEach方法的工作原理。

//a logging utility output text to the web page
const output=(string)=>document.body.innerHTML+=`${string}<br/>`;

//an array of numbers
let numberArray = [1, 2, 3, 4, 5];

//output the square of each number
let returnValue = numberArray.forEach((num, index) => 
  output(`${num} x ${num} = ${num * num}`);
);

//the array hasn't changed
output(numberArray);
output(returnValue);

trying >>

示例中，我们计算数组所有元素的平方。对每个元素调用 forEach 方法，我们记录它的平方。这个辅助方法的返回值被忽略，原始数组不会改变。forEach的返回值始终为undefined。

map方法

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

我们用map修改上面的示例。

//a logging utility output text to the web page
const output=(string)=>document.body.innerHTML+=`${string}<br/>`;

//an array of numbers
let numberArray = [1, 2, 3, 4, 5];

//output the square of each number
let returnValue = numberArray.map((num) => num * num)

//view the results
output(numberArray);
output(returnValue);

可以看到，numberArray数组保持不变，但map返回值是一个新数组，该数组是通过将 square 函数应用于数组的每个元素构建的。

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

//a logging utility output text to the web page
const output=(string)=>document.body.innerHTML+=`${string}<br/>`;

//an array of numbers
let numberArray = [1, 2, 3, 4, 5];

//output the square of each number
let returnValue = numberArray
  .map((num) => num * 2)
  .map((num) => num.toString())
  .map((string) => "$"+string);

//view the results
output(numberArray);
output(returnValue);

输出结果

1,2,3,4,5
$2,$4,$6,$8,$10

trying >>

map 和 forEach方法之间的差异

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

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

而map方法用于创建一个新数组，它是可连接的，你可以一个接一个地调用多个map操作。

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

我应该使用哪一个，map还是forEach？

现在，归结为这个问题，如何决定是否应该使用map还是forEach方法？

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

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

结论

今天，我们讨论了 JavaScript 中两个有用的方法：map和forEach. 我们通过几个例子了解了它们之间的差异，并给出了一些使用建议，希望对大家有所帮助。

标签: map方法  forEach方法