介绍
从经典的 for 循环到 forEach() 方法，JavaScript 中有很多种遍历数据集的技巧和方法。其中最常用的方法之一是 .map() 方法。.map() 通过对父数组中的每个元素调用特定函数来创建一个新数组。与仅修改调用数组的修改方法不同，.map() 是一种非修改方法，它会创建一个新的 JavaScript 数组。在处理数组时，此方法有很多用途。在本教程中，您将看到 .map() 在 JavaScript 中的四个主要用途：从数组元素调用函数、将字符串转换为数组、在 JavaScript 库中渲染列表以及重新格式化数组对象。.
先决条件
本教程不需要编写代码，但如果您想跟着示例一起学习，可以使用 Node.js REPL 或浏览器开发者工具。.
如何为数组中的每个元素调用一个 JS 函数
.`.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) 的代码可以使你的代码更易读。.
如何将JS字符串转换为数组
`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)此输出已记录在控制台中：
Output
[ "Sa", "aa", "ma", "ma", "ya" ]在这里，你对一个字符串使用了 .map() 函数，并传递了 .map() 函数所期望的函数参数。.
这与字符串的 split() 方法类似，区别在于可以在将每个字符串字符返回到数组之前对其进行更改。.
如何在 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()` 方法遍历名称数组进行渲染。该组件使用 ReactDOM 渲染，并基于具有根 ID 的 DOM 元素进行渲染。.
如何重新格式化 JavaScript 数组对象
`.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() 的功能。.
