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 。

最后

整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。

有需要的小伙伴，可以点击下方卡片领取，无偿分享