简介
从经典的for循环到forEach()方法，使用了各种技术和方法来迭代JavaScript.中的数据集最流行的方法之一是.map()方法。.map()通过对父数组中的每一项调用特定的array来创建function。.map()是创建新数组的非变异方法，而不是只对调用数组进行更改的变异方法。
在处理数组时，此方法可以有多种用途。在本教程中，您将看到在JavaScript中.map()的四个值得注意的用法：调用数组元素的函数、将字符串转换为数组、在JavaScript库中呈现列表以及重新格式化数组对象。
前提条件
本教程不需要任何编码，但如果您有兴趣跟随示例一起学习，您可以使用Node.js REPL或浏览器开发工具。
- 若要在本地安装node.js，可以按照如何安装node.js并创建本地开发Environment.]中的步骤操作
- Chrome DevTools可通过下载并安装最新版本的Google Chrome.)获得
第一步-对数组中的每一项调用函数
.map()接受回调function作为其参数之一，该函数的一个重要参数是该函数正在处理的项的当前值。这是必需的参数。使用此参数，您可以修改数组中的每一项，并将其作为新数组的已修改成员返回。
下面是一个例子：
1const sweetArray = [2, 3, 4, 5, 35]
2const sweeterArray = sweetArray.map(sweetItem => {
3 return sweetItem * 2
4})
5
6console.log(sweeterArray)
此输出将记录到控制台：
1[secondary_label Output]
2[ 4, 6, 8, 10, 70 ]
这可以通过以下方式进一步简化以使其更干净：
1// create a function to use
2const makeSweeter = sweetItem => sweetItem * 2;
3
4// we have an array
5const sweetArray = [2, 3, 4, 5, 35];
6
7// call the function we made. more readable
8const sweeterArray = sweetArray.map(makeSweeter);
9
10console.log(sweeterArray);
相同的输出将记录到控制台：
1[secondary_label Output]
2[ 4, 6, 8, 10, 70 ]
拥有像SweetArray.map(Make Sweeter)这样的代码会使您的代码更具可读性。
第二步-将字符串转换为数组
已知.map()属于数组原型。在本步骤中，您将使用它将字符串转换为数组。在这里，您不是在开发用于字符串的方法。相反，您将使用特殊的.call()方法。
JavaScript中的一切都是一个对象，方法是附加到这些对象的函数。.call（)允许您在另一个对象上使用一个对象的上下文。因此，您将把数组中.map（)的上下文复制到字符串中。
.call（)可以传递要使用的上下文的参数和原始函数的参数。
下面是一个例子：
1const name = "Sammy"
2const map = Array.prototype.map
3
4const newName = map.call(name, eachLetter => {
5 return `${eachLetter}a`
6})
7
8console.log(newName)
此输出将记录到控制台：
1[secondary_label Output]
2[ "Sa", "aa", "ma", "ma", "ya" ]
这里，您在字符串上使用了.map()的上下文，并传递了.map()期望的函数的参数。
它的工作原理类似于字符串的[.method](https://andsky.com/tech/tutorials/how-to-index-split-and-manipulate-strings-in-javascript)()拆分，不同之处在于每个单独的字符串字符在数组中返回之前都可以修改。
第三步-在JavaScript库中渲染列表
像Reaction使用.map()这样的JAVASCRIPT库在列表中呈现项目。这需要jsx syntax，]，因为.map()方法被包装在jsx语法中。
下面是一个Reaction组件的示例：
1import React from "react";
2import ReactDOM from "react-dom";
3
4const names = ["whale", "squid", "turtle", "coral", "starfish"];
5
6const NamesList = () => (
7 <div>
8 <ul>{names.map(name => <li key={name}> {name} </li>)}</ul>
9 </div>
10);
11
12const rootElement = document.getElementById("root");
13ReactDOM.render(<NamesList />, rootElement);
这是React中的一个无状态组件，它呈现一个带有列表的div。各个列表项是使用.map()迭代name数组呈现的。该组件使用ReactDOM在带有root的Id的DOM元素上呈现。
第四步-重新格式化数组对象
.map()可用于循环访问数组中的对象，并以类似于传统数组的方式修改每个单独对象的内容并返回新的数组。此修改是根据回调函数中返回的内容进行的。
下面是一个例子：
1const myUsers = [
2 { name: 'shark', likes: 'ocean' },
3 { name: 'turtle', likes: 'pond' },
4 { name: 'otter', likes: 'fish biscuits' }
5]
6
7const usersByLikes = myUsers.map(item => {
8 const container = {};
9
10 container[item.name] = item.likes;
11 container.age = item.name.length * 10;
12
13 return container;
14})
15
16console.log(usersByLikes);
此输出将记录到控制台：
1[secondary_label Output]
2[
3 {shark: "ocean", age: 50},
4 {turtle: "pond", age: 60},
5 {otter: "fish biscuits", age: 50}
6]
在这里，您使用方括号和点符号修改了数组中的每个对象。此用例可用于在前端应用程序上保存或解析接收的数据之前对其进行处理或压缩。
总结
在本教程中，我们了解了.map()方法在JavaScript中的四种用法。结合其他方法，.map()的功能可以扩展。有关更多信息，请参阅我们的文章如何在JAVASCRIPT中使用数组方法：Iteration Methods。