如何在 JavaScript 中使用 map() 迭代数组

简介

从经典的 for 循环到 forEach() 方法，JavaScript 中有各种技术和方法用于遍历数据集。其中最流行的方法之一是 .map() 方法。.map() 通过在父数组的每个项目上调用特定函数来创建一个数组。.map() 是一个非变异方法，它创建一个新数组，而不是变异方法，变异方法只对调用数组进行更改。

在处理数组时，这种方法可以有很多用途。在本教程中，您将了解 JavaScript 中 .map() 的四个值得注意的用法：调用数组元素的函数、将字符串转换为数组、在 JavaScript 库中渲染列表以及重新格式化数组对象。

先决条件

本教程不需要任何编码，但如果您有兴趣跟随示例，可以使用 Node.js REPL 或浏览器开发者工具。

• 要在本地安装 Node.js，可以按照《如何安装 Node.js 并创建本地开发环境》中的步骤进行操作。

• 通过下载并安装最新版本的 Google Chrome，即可使用 Chrome DevTools。

步骤 1 —— 在数组的每个项目上调用函数

.map() 接受回调函数作为其参数之一，该函数的一个重要参数是正在被函数处理的项目的当前值。这是一个必需的参数。通过这个参数，您可以修改数组中的每个项目，并将其作为新数组的修改成员返回。

以下是一个示例：

const sweetArray = [2, 3, 4, 5, 35]
const sweeterArray = sweetArray.map(sweetItem => {
    return sweetItem * 2
})

console.log(sweeterArray)

这将在控制台中记录以下输出：

[ 4, 6, 8, 10, 70 ]

这可以进一步简化，以使代码更清晰：

// 创建一个要使用的函数
const makeSweeter = sweetItem => sweetItem * 2;

// 我们有一个数组
const sweetArray = [2, 3, 4, 5, 35];

// 调用我们创建的函数。更易读
const sweeterArray = sweetArray.map(makeSweeter);

console.log(sweeterArray);

同样的输出将记录在控制台中：

[ 4, 6, 8, 10, 70 ]

像 sweetArray.map(makeSweeter) 这样的代码使您的代码更易读。

步骤 2 —— 将字符串转换为数组

.map() 被认为属于数组原型。在这一步中，您将使用它将字符串转换为数组。在这里，您不是为字符串开发该方法。相反，您将使用特殊的 .call() 方法。

在 JavaScript 中，一切都是对象，方法是附加到这些对象的函数。.call() 允许您在另一个对象上使用一个对象的上下文。因此，您将在字符串上复制 .map() 的上下文，并传递给 .call() 方法的函数参数。

以下是一个示例：

const name = "Sammy"
const map = Array.prototype.map

const newName = map.call(name, eachLetter => {
    return `${eachLetter}a`
})

console.log(newName)

这将在控制台中记录以下输出：

[ "Sa", "aa", "ma", "ma", "ya" ]

在这里，您在字符串上使用了 .map() 的上下文，并传递了 .map() 期望的函数的参数。

这类似于字符串的 .split() 方法，只是在返回数组之前可以修改每个单独的字符串字符。

步骤 3 —— 在 JavaScript 库中渲染列表

像 React 这样的 JavaScript 库使用 .map() 来渲染列表。但是，这需要 JSX 语法，因为 .map() 方法被包装在 JSX 语法中。

以下是一个 React 组件的示例：

import React from "react";
import ReactDOM from "react-dom";

const names = ["whale", "squid", "turtle", "coral", "starfish"];

const NamesList = () => (
  <div>
    <ul>{names.map(name => <li key={name}> {name} </li>)}</ul>
  </div>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<NamesList />, rootElement);

这是 React 中的一个无状态组件，它渲染了一个带有列表的 div。使用 .map() 迭代 names 数组来渲染单独的列表项。此组件使用 ReactDOM 渲染到具有 Id 为 root 的 DOM 元素上。

步骤 4 — 重新格式化数组对象

.map() 可以用于遍历数组中的对象，并且类似于传统数组，修改每个单独对象的内容并返回一个新数组。这种修改是基于回调函数中返回的内容进行的。

下面是一个例子：

const myUsers = [
    { name: 'shark', likes: 'ocean' },
    { name: 'turtle', likes: 'pond' },
    { name: 'otter', likes: 'fish biscuits' }
]

const usersByLikes = myUsers.map(item => {
    const container = {};

    container[item.name] = item.likes;
    container.age = item.name.length * 10;

    return container;
})

console.log(usersByLikes);

这个输出被记录在控制台中：

[
    {shark: "ocean", age: 50},
    {turtle: "pond", age: 60},
    {otter: "fish biscuits", age: 50}
]

在这里，你使用了方括号和点符号来修改数组中的每个对象。这种用法可以用于在前端应用程序保存或解析接收到的数据之前对其进行处理或压缩。

结论

在本教程中，我们介绍了 JavaScript 中 .map() 方法的四种用法。结合其他方法，可以扩展 .map() 的功能。欲了解更多信息，请参阅我们的《如何在 JavaScript 中使用数组方法：迭代方法》文章。