当ES6（EmcaScript 2015）问世时，它为数组的迭代带来了一套全新的方法。其中最有用的是map() 方法。
Array.prototype.map() 是一个内置的数组方法，用于遍历JavaScript中数组集合中的元素。可以把循环看作是在一个列表中从一个元素到另一个元素的一种方式，同时仍然保持每个元素的顺序和位置。
这个方法接收一个回调函数，每迭代一个新元素就会被调用。
这个回调函数有三个参数:
- 当前值
- 它的索引
- 目标数组
如果你是一个初学者，正在努力理解如何使用map() 方法或它的具体作用，那么这篇文章就是为你准备的。
在这篇文章中，我将解释map() 方法，并通过一些简单的例子说明它是如何工作的。
map()方法如何在JavaScript中工作
想象一下：在一家医院外面，有一群人在排队等待接种疫苗。这意味着他们还没有被接种疫苗。
一个医生逐一对他们所有人进行疫苗接种。医生通过在队伍中迭代来完成这一工作。在一端，有一群尚未接种疫苗的人。医生把他们中的每一个人，给他们注射疫苗，然后把他们返回到一个新的 已接种疫苗的人的行中。
在一端，有一个你想操作的数组（A）。map() ，接收该数组（A）中的所有元素，对每个元素执行一致的操作，并将它们返回到一个新的数组（B）中。
如何使用map()方法--复仇者联盟的例子
为了说明map() 在JavaScript中是如何工作的，让我们考虑一个我们最喜欢的复仇者联盟的名字的列表。问题是，这个列表中的名字并不完整--它们缺少一个重要的后缀。
通过map() ，我们可以把数组中的所有名字都加上 "man "这个后缀，然后再把每个名字都加进去:
let firstNames = ["super", "spider", "ant", "iron"]
let lastName = "man";
let fullNames = firstNames.map(firstName => firstName + lastName);
console.log(fullNames);
// ["superman", "spiderman", "antman", "ironman"]
VISUAL CODE
那么女性呢？
对不起，我的错。我意识到我的错误，决定在数组的第一个位置加入一个女性角色。数组中的每个项目都由一个唯一的值来识别，即它的索引（或在数组中的位置）。第一个项目的索引是0 ，第二个项目的索引是1 ，以此类推。
由于现在列表中出现了一位女性超级英雄，我们要确保为相应的超级英雄添加正确的后缀。
由于map() ，我们可以通过检查我们的英雄的索引来做到这一点，并确保我们在数组的第一个项目中使用 "女人 "后缀:
let firstNames = ["wonder", "spider", "ant", "iron"]
let male = "man";
let female = "woman";
let fullNames = firstNames.map(function(firstName, index) {
return (index == 0) ? firstName + female : firstName + male;
});
console.log(fullNames);
["wonderwoman", "spiderman", "antman", "ironman"]
如何使用索引参数
除了被迭代的值之外，map还接收其索引位置。如果你想根据项目的索引位置执行不同的操作，这就非常有用。
在前面的例子中，我们通过检查索引来追加一个不同的后缀。
为了找出我们的每个项目在数组中的索引位置，我们可以这样做:
let fullNames = ["wonderwoman", "spiderman", "antman", "ironman"]
fullNames.map(function(firstName, index) {
console.log(${firstName} is at ${index} position)
});
/*
"wonderwoman is at 0 position"
"spiderman is at 1 position"
"antman is at 2 position"
"ironman is at 3 position"
*/
结果
如何将数组中的所有项目乘以2
现在让我们对数字进行一下处理。在这个例子中，我们只是想把目标数组中的每个数字都乘以2，然后把它们的乘积返回到一个新的数组中。
let numbers = [10, 20, 30, 40]
let multiplier = 2;
let products = numbers.map(number => number * multiplier);
console.log(products);
// [20, 40, 60, 80]
如何四舍五入到最近的整数
如果我们有一个小数数组，但我们希望每个小数都被四舍五入到最近的整数，怎么办？
let numbers = [3.7, 4.9, 6.2]
let rounded = numbers.map(function(number) {
return Math.round(number);
})
console.log(rounded);
// [4, 5, 6]
如何将字符串改为数字
我们有一个字符串类型的数字列表。但是，我们想把每个数字转换为数字类型。
let strings = ["10","20","30"]
let numbers = strings.map(function(string) {
return Number(string);
})
console.log(numbers);
// [10, 20, 30]
如何获得复仇者联盟的真实姓名
在这个例子中，我们是在处理对象。我们在数组中有五个复仇者，每个人都有一个真实姓名和一个英雄姓名。然而，我们只想把他们的真实姓名检索到新的数组中。
let avengers = [
{name: "steve rogers", heroName: "captain america"},
{name: "tony stark", heroName: "iron man"},
{name: "bruce banner", heroName: "the hulk"},
{name: "peter parker", heroName: "spiderman"},
{name: "tchalla", heroName: "black panther"}
]
let realNames = avengers.map(avenger => avenger.name);
console.log(realNames);
// ["steve rogers", "tony stark", "bruce banner", "peter parker", "tchalla"]
如何获取复仇者联盟的英雄名字
为了只获得他们的英雄名字，我们做了几乎完全相同的事情，只是在这种情况下，我们访问了heroName 属性:
let avengers = [
{name: "steve rogers", heroName: "captain america"},
{name: "tony stark", heroName: "iron man"},
{name: "bruce banner", heroName: "the hulk"},
{name: "peter parker", heroName: "spiderman"},
{name: "tchalla", heroName: "black panther"}
]
let heroNames = avengers.map(avenger => avenger.heroName);
console.log(heroNames);
// ["captain america", "iron man", "the hulk", "spiderman", "black panther"]
如何分离出一个函数
我们可以在map() 中直接定义一个函数，而不是在外面定义这个函数，然后在我们的map() 函数中调用它:
let avengers = [
{name: "steve rogers", heroName: "captain america"},
{name: "tony stark", heroName: "iron man"},
{name: "bruce banner", heroName: "the hulk"},
{name: "peter parker", heroName: "spiderman"},
{name: "tchalla", heroName: "black panther"}
]
let getName = avenger =>avenger.name;
let realNames = avengers.map(getName);
console.log(realNames);
// ["steve rogers", "tony stark", "bruce banner", "peter parker", "tchalla"]
阵列参数如何工作
前面我说过，在每次迭代中，map() 方法都会接收被迭代的值和它的索引位置。在这两个参数之外，还有一个参数，即Array 参数。
arr 参数表示被循环的目标数组，以及它的全部内容。有了这个参数，你基本上就可以在整个数组中寻找东西了。
在这个例子中，我们将访问arr 参数来查看并检查当前项是否是列表中的最后一项。如果不是，我们就访问下一个项目，并从当前项目中减去它。如果它是最后一项，我们就返回它:
const oldArray = [33, 20, 10, 5];
const newArray = oldArray.map((currentVal, index, arr) => {
let nextItem = index + 1 < arr.length ? arr[index + 1] : 0
return currentVal - nextItem;
});
console.log(newArray);
// [13, 10, 5, 5]
总结
map() 方法是在ES6中引入的。通过这个方法，我们可以对数组中的每一个项目进行访问并执行一致的操作。
它接收了一个回调函数，并为它所遍历的每一个新元素调用该函数。
在本教程中，我介绍了map()方法，通过一个类比说明了它是如何工作的，并给出了一些在JavaScript代码中使用它的实际例子。
我希望你能从这篇文章中得到一些有用的东西。如果你喜欢这样的编程相关教程，你应该看看我的博客。我定期在那里发表关于软件开发的文章。
谢谢你的阅读，再见。
