前言

在 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 。

全文完

谢谢！

点击查看活动详情