从经典的 for 循环到 forEach() 方法，用于迭代数据集合的各种技术和方法比比皆是。但是现在比较流行的方法是 .map() 方法。
.map() 通过指定函数调用一个数组中每一项元素，来创建一个新数组。 .map() 是一种 non-mutating(非变异) 方法，它创建一个新数组，而不是只对调用数组进行更改的 mutating(变异) 方法。这可能很难记住。
语法：
array.map(function(currentValue,index,arr), thisValue)
currentValue：必须。当前元素的值
index：可选。当期元素的索引值
arr：可选。当期元素属于的数组对象
thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。可改变this指向，
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意： map() 不会对空数组进行检测。
注意： map() 不会改变原始数组。
在这篇文章中，我们将探讨一下 JavaScript 中 .map() 的 4 个值得注意的用法。让我们开始！
在数组中的每一项元素上调用一个函数
将字符串转换为数组
在 JavaScript 库中用于渲染列表
重新格式化数组对象
小技巧使用案例
1. 在数组中的每一项元素上调用一个函数
如前所述，.map() 接受回调函数作为其参数之一，该函数的一个重要参数是由该函数处理的项的当前值。这是一个必需的参数。有了这个参数，我们可以修改数组中的每个单独项，并在其上创建一个新元素。这里有一个例子：
const sweetArray = [2, 3, 4, 5, 35] const sweeterArray = sweetArray.map(sweetItem => { return sweetItem * 2 }) console.log(sweetArray) // [2, 3, 4, 5, 35] console.log(sweeterArray) // [4, 6, 8, 10, 70]
我们可以看到，原数组 sweetArray 并没有被修改，所以 .map() 是一种 non-mutating(非变异) 方法。这里值得一提的是 forEach() 方法，它是遍历数组，对原来的数据操作，会改变原数组。
这甚至可以进一步简化，使其更清洁：
// 创建一个要使用的函数 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() 属于 Array 原型。 我们如何使用它将字符串转换为数组。 不用担心，我们不需要再开发一个方法来处理字符串，而是使用特殊的 .call() 方法。
JavaScript 中的所有内容都是对象，方法只是附加到这些对象的函数。 .call() 允许我们利用另一个对象的上下文。 因此，我们将数组中的 .map() 上下文复制到字符串。
.call() 可以传递参数，要使用的上下文和“参数原始函数的参数”。 听起来有点拗口？ 这是一个例子：
const name = "Chuloo" const map = Array.prototype.map const newName = map.call(name, eachLetter => { return `${eachLetter}a` }) console.log(newName) // ["Ca", "ha", "ua", "la", "oa", "oa"]
这里，我们只是在String上使用 .map() 的上下文，并传递了 .map() 所期望的函数参数。 你可以看看控制台里打印出来的内容。
这类似于 String 的 .split() 方法，不过 .split() 方法只能在返回数组之前修改每个单独的字符串字符。
3.在 JavaScript 库中用于渲染列表
像 React 这样的 JavaScript 库利用 .map() 来渲染列表中的项目。这需要 JSX 语法，但是 .map() 方法包含在类似于 mustache 的 JSX 语法中。这是 React 组件的一个很好的例子。
import React from "react"; import ReactDOM from "react-dom"; const names = ["john", "sean", "mike", "jean", "chris"]; const NamesList = () => ( <div> <ul>{names.map(name => <li key={name}> {name} </li>)}</ul> </div> ); const rootElement = document.getElementById("root"); ReactDOM.render(<NamesList />, rootElement);
如果你不熟悉 React ，那么我告诉这是 React 中的一个简单的无状态组件，它使用列表渲染div。 使用 .map() 渲染单个列表项以迭代最初创建的 names 数组。 此组件使用 ReactDOM 渲染 ID为 root 的 DOM 元素 。
4.重新格式化数组对象
如何处理数组中的对象？ .map() 可用于迭代数组中的对象，并以与传统数组类似的方式，修改每个单独对象的内容 并返回一个新数组。 这个修改是基于回调函数中返回的内容来完成的。这里有一个例子: