如何使用.map()在JavaScript中遍历数组项

来自菜鸟教程
跳转至：导航、​搜索

介绍

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

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

先决条件

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

第 1 步 — 对数组中的每个项目调用一个函数

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

这是一个例子： 

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

console.log(sweeterArray)

此输出记录到控制台： 

Output[ 4, 6, 8, 10, 70 ]

这可以进一步简化以使其更清洁： 

// create a function to use
const makeSweeter = sweetItem => sweetItem * 2;

// we have an array
const sweetArray = [2, 3, 4, 5, 35];

// call the function we made. more readable
const sweeterArray = sweetArray.map(makeSweeter);

console.log(sweeterArray);

相同的输出记录到控制台： 

Output[ 4, 6, 8, 10, 70 ]

拥有像 sweetArray.map(makeSweeter) 这样的代码会让你的代码更具可读性。

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

.map() 已知属于数组原型。 在此步骤中，您将使用它将字符串转换为数组。 您没有在这里开发适用于字符串的方法。 相反，您将使用特殊的 .call() 方法。

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

.call() 可以传递要使用的上下文的参数和原始函数的参数的参数。

这是一个例子： 

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

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

console.log(newName)

此输出记录到控制台： 

Output[ "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() 呈现单个列表项以迭代 [X75X] 数组。 该组件使用 ReactDOM 在 root 的 Id 的 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);

此输出记录到控制台： 

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

在这里，您使用括号和点表示法修改了数组中的每个对象。 此用例可用于在将接收到的数据保存或解析到前端应用程序之前对其进行处理或压缩。

结论

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

取自“https://cainiaojiaocheng.com/index.php?title=如何使用.map()在JavaScript中遍历数组项&oldid=28231”
Powered by MediaWiki