使用 map 显示数组中的数据

你经常会发现自己使用存储在数组中的数据集合。尽管使用数组数据与使用任何其他对象相似，但你确实需要能够遍历数据并将其显示给用户。正如你所料，在 JSX 中可以使用 JavaScript 代码实现这一点。特别是使用 map 函数。

map 允许你创建数组的已修改副本。当需要转换数组的值以便显示时，这非常有用。若要向用户显示值，请采用值并将其嵌入到 HTML 元素中。对于 map 而言，这是非常理想的选择。利用 map，你可以创建一个新数组，该数组由 HTML 组成，其中包含数组中要显示的各个值。

使用 `map`

map 的行为类似于 for...of 循环或 forEach 方法。它针对数组中的每个项运行一次。主要区别在于，它会生成一个新数组，其中的值由传递给 map 的函数返回。

让我们通过查看如何从现有的带有数字平方的数组中创建一个新数组来探索 map。首先创建一个数字数组。

const numbers = [2, 5, 8];

然后使用 map。 map 接受带有单个参数的函数。该参数将设置为原始数组中每个数字的值。为此，你将使用 => 或胖箭头语法创建一个匿名函数。

const squared = numbers.map((number) => {
    return number * number;
});

squared 是一个新数组，其中包含原始数字的平方。如果使用 console.log 显示它们，则会看到以下内容：

console.log(squared);
// Output: [4, 25, 64]

当你在 React 中显示列表时，请为每个项设置一个键。这允许 React 和你都引用当前显示的单个项，并将它们与绑定数据关联起来。生成键的最常见方法是使用数组中项的索引。

使用 for 循环时，你会自然而然地生成一个索引作为语法的一部分。使用 map 时，可以使用委托函数中的第二个参数访问索引。第二个参数自动设置为当前索引。

const squared = numbers.map((number, index) => {
    console.log(`Processing item ${index + 1}`);
    return number * number;
});

如前面示例中强调的那样，你通常可以使用 map 来显示项列表。主要区别在于，你返回的是 JSX，而不是数字（如示例中所示）。 React 的原则是，所有显示的项都应有一个键。如果显示的项没有自然键，则通常使用索引。例如，如果想要在 div 元素中显示平方数，可以使用以下内容：

const squared = numbers.map((number, index) => {
    return (
        <div key={index}>{ number * number }</div>
    );
});

可以像使用 JSX 中的其他变量一样使用 squared。如果已在其他地方将 { squared } 添加到 JSX，它将呈现带有更新后的数字的 div 元素集合。