一、概念
map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
二、语法
var new_array = arr.map(function callback(currentValue[, index[, array]]) {
// Return element for new_array
}[, thisArg])
参数:
callback 生成新数组元素的函数,使用三个参数:
currentValue callback 数组中正在处理的当前元素。
index可选 callback 数组中正在处理的当前元素的索引。
array可选 callback map 方法被调用的数组。
thisArg可选 执行 callback 函数时使用的this 值。
返回值:
一个新数组,每个元素都是回调函数的结果。
三、描述
使用 map 方法处理数组时,数组元素的范围是在 callback 方法第一次调用之前就已经确定了。在 map 方法执行的过程中:原数组中新增加的元素将不会被 callback 访问到;若已经存在的元素被改变或删除了,则它们的传递到 callback 的值是 map 方法遍历到它们的那一时刻的值;而被删除的元素将不会被访问到。
四、用法示例
① 求数组中每个元素的平方根
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
console.log(numbers);
console.log(roots);
打印结果:
(3) [1, 4, 9]
(3) [1, 2, 3]
② 使用 map 重新格式化数组中的对象
var kvArray =
[
{ key: 1, value: 10 },
{ key: 2, value: 20 },
{ key: 3, value: 30 }
];
var reformattedArray = kvArray.map(function (obj) {
var rObj = {};
rObj[obj.key] = obj.value;
return rObj;
});
// reformattedArray 数组为: [{1: 10}, {2: 20}, {3: 30}],
// kvArray 数组未被修改:
// [{key: 1, value: 10},
// {key: 2, value: 20},
// {key: 3, value: 30}]
③ 使用一个包含一个参数的函数来mapping(构建)一个数字数组
当函数需要一个参数时map的工作方式:
当map循环遍历原始数组时,这个参数会自动被分配成数组中对应的每个元素
var numbers = [1, 4, 9];
var doubles = numbers.map(function (num) {
return num * 2;
});
console.log(numbers);
console.log(doubles);
打印结果:
(3) [1, 4, 9]
(3) [2, 8, 18]
④ 一般的map 方法
如何在一个 String 上使用 map 方法获取字符串中每个字符所对应的 ASCII 码组成的数组:
var map = Array.prototype.map
var a = map.call("Hello World", function (x) {
return x.charCodeAt(0);
})
console.log(a);
// 打印结果:
// [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
⑤ 踩坑案例
通常情况下,map 方法中的 callback 函数只需要接受一个参数,就是正在被遍历的数组元素本身。但这并不意味着 map 只给 callback 传了一个参数。这个思维惯性可能会让我们犯一个很容易犯的错误。
下面的语句返回什么呢:
["1", "2", "3"].map(parseInt);
// 你可能觉的会是[1, 2, 3]
// 但实际的结果是 [1, NaN, NaN]
解析:
通常使用parseInt时,只需要传递一个参数。但实际上,parseInt可以有两个参数,第二个参数是进制数。(可以通过语句"alert(parseInt.length)===2"来验证.)
console.log((parseInt.length)===2); //true
map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素,元素索引, 原数组本身。第三个参数parseInt会忽视,但第二个参数不会,也就是说:parseInt把传过来的索引值当成进制数来使用,从而返回了NaN
例如:
function returnInt(element) {
return parseInt(element, 10);
}
['1', '2', '3'].map(returnInt);
// 打印结果:[1, 2, 3]
// 因为第二个参数表示进制,是10进制。
// 也可以使用简单的箭头函数,结果同上
['1', '2', '3'].map( str => parseInt(str) );
// 一个更简单的方式:
['1', '2', '3'].map(Number); // [1, 2, 3]
// 与`parseInt` 不同,下面的结果会返回浮点数或指数:
['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]