JavaScript map()与forEach()方法的使用差异

技术频道 - js技术

JavaScript map()与forEach()方法的使用差异

作者:admin 时间:2021-9-29 17:11:56 浏览:311

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

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);