JavaScript 中的 Array.map() 与 Array.forEach()
前言
在 JavaScript 中遍历数组 ，最常见的有两种方法
- 使用
Array.map() - 使用
Array.forEach()
这两种方法都可以让您遍历数组并对数组元素执行操作。但是您需要记住这些方法之间的一些关键区别。 因此，您需要根据情况决定在这两种方法中使用哪种方法。
在本文中，我将解释这两种方法以及您可以使用它们的用例。
Array.map()
map() 方法允许您创建一个新数组，其中填充了对调用数组中的每个元素调用提供的回调函数的结果。
下面是 map() 方法的定义。
map(function(element, index, array) {
/* ... */
}, thisArg)
map() 中的回调函数将始终使用三个参数调用。
- 元素的值
- 元素的索引
- 正在遍历的 Array 对象
如果我们想显式地向方法提供 this 值，我们可以使用 thisArg 参数来实现。
因此，假设有一个名为 numbers 的数组，我们可以像这样使用 map() 方法遍历该数组。
const numbers = [1, 2, 3, 4];
// 接收数组的每一个参数
// 将他们乘以2
// 返回一个新的数组是他们的结果
const mapNumbers = numbers.map(function(number) {
return number * 2;
});
console.log(mapNumbers);
// [2, 4, 6, 8]
map() 方法将遍历 numbers 数组，调用每个数组元素上提供的回调函数，并返回一个全新的数组。
这里要注意的一件事是， map() 不会改变原始数组。因此，数字数组保持不变。
何时使用 Array.map()
在您要使用该方法返回的数组的情况下，您应该使用 map() 方法。
以下面的 React 组件为例。
export default function App() {
const posts = [
{
id: 1,
title: "Hello World",
},
{
id: 2,
title: "Hello China",
}
];
const sidebar = posts.map((post) => (
<li key={post.id}>{post.title}</li>
));
console.log(sidebar);
return (
<div>
<ul>
{sidebar}
</u>
</div>
);
}
在此示例中，我们有一个名为 posts 的对象数组，我们要渲染这些对象。因此，在这种情况下，我们可以使用 map() 方法，因为我们希望将返回的数组分配给 sidebar 变量。
然后 React 遍历这个数组并使用 props.children 来呈现所需的输出。
在这种情况下， map() 应该是您的“首选”方法。
什么时候不使用 Array.map()
什么时候不使用 Array.map() 。答案很简单。如果您不使用它返回的数组，则不应使用此方法。您应该完全避免使用 map() 。
Array.forEach() 方法
forEach() 方法允许您遍历数组并为每个数组元素执行一次提供的函数，与 map() 方法完全一样。但是有一些区别。
- 它不会返回一个新数组。
- 它将始终返回
undefined。
下面是 forEach() 方法的定义。
forEach(function(element, index, array) {
/* ... */
}, thisArg)
forEach() 中的回调函数将始终使用三个参数调用。
- 元素的值
- 元素的索引
- 正在遍历的 Array 对象
如果我们想显式地向方法提供 this 值，我们可以使用 thisArg 参数来实现。
下面是一个演示 forEach() 方法用法的简单示例。
const numbers = [1, 2, 3, 4];
const mapNumbers = [];
// 接收数组的每一个参数
// 将他们乘以2
// 并将他们打印出来
numbers.forEach(function(number) {
mapNumbers.push(number * 2);
});
console.log(mapNumbers);
// [ 2, 4, 6, 8 ]
由于 forEach() 方法不返回新数组，我们需要在回调函数中手动将数组元素推送到新创建的数组。
另请注意，我们在这里有效地改变了 mapNumbers 数组，这与 map() 方法不同，这并不总是一个好的做法。
何时使用 Array.forEach()
当您只想对数组元素执行某些操作时，您总是可以使用 forEach() 方法。例如，在您只想打印数组元素的情况下。
另一个用例是当您想要执行一些副作用（例如日志记录）时在链的末尾使用它。
什么时候不使用 Array.forEach()
当您需要返回新构造的数组时，您应该轻松地避免使用 forEach() 方法，因为该方法将始终返回 undefined 值。
所以，当你想在 React 组件中渲染数组元素时，你不能使用 forEach 。
全文完