map() 方法创建一个新数组，其中填充了对调用数组中的每个元素调用提供的函数的结果。
使用 map 方法从数组中提取数据
目前为止，已经使用纯函数来避免程序中的副作用。 此外，已经看到函数的值仅取决于其输入参数。
这仅仅是个开始。 顾名思义，函数式编程以函数理论为中心。
能够将它们作为参数传递给其他函数，从另一个函数返回一个函数是有意义的。
函数在 JavaScript 中被视为 First Class Objects，它们可以像任何其他对象一样使用。
它们可以保存在变量中，存储在对象中，也可以作为函数参数传递。
从一些简单的数组函数开始，这些函数是数组对象原型上的方法。
数组的 map 方法（即 Array.prototype.map()）。
请记住，map方法是迭代数组中每一项的方式之一。
在对每个元素应用回调函数后，它会创建一个新数组(不改变原来的数组)。 它这样做时没有改变原始数组。
当调用回调函数时，传入了三个参数。
第一个参数是当前正在处理的数组项。 第二个参数是当前数组项的索引值，第三个参数是在其上调用 map 方法的数组。
简单的例子：
1
2
3
4
5
6
7
8
9
|
const users = [
{ name: 'John', age: 34 },
{ name: 'Amy', age: 20 },
{ name: 'camperCat', age: 10 }
];
const names = users.map(user => user.name);
console.log(names); // [ 'John', 'Amy', 'camperCat' ]
|
复杂的例子：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
// 全局变量
const watchList = [
{
"Title": "Inception",
"Year": "2010",
"imdbRating": "8.8",
},
{
"Title": "Interstellar",
"Year": "2014",
"imdbRating": "8.6",
}
];
const ratings = watchList.map(({ Title: title, imdbRating: rating }) => ({title, rating}));
console.log(JSON.stringify(ratings)); // [{"title":"Inception","rating":"8.8"},{"title":"Interstellar","rating":"8.6"}]
|
在原型上实现 map 方法
Array.prototype.map() 方法（即 map()），通过 map 返回一个与调用它的数组长度相同的数组。
只要它的回调函数不改变原始数组，它就不会改变原始数组。
换句话说，map 是一个纯函数，它的输出仅取决于输入的数组和作为参数传入的回调函数。 此外，它接收另一个函数作为它的参数。
实现一个 map，加深对它的了解。 可以用 for 循环或者 Array.prototype.forEach() 方法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
// 全局变量
const s = [23, 65, 98, 5];
Array.prototype.myMap = function (callback) {
const newArray = [];
for (let i = 0; i < this.length; i++) {
newArray.push(callback(this[i]));
}
// 或者 this.forEach(a => newArray.push(callback(a)));
return newArray;
};
const new_s = s.myMap(function (item) {
return item * 2;
});
console.log(new_s); // [ 46, 130, 196, 10 ]
|