发布于 1年前
JavaScript Array map()函数的用法及误用
Array的map()函数作用是一个数组映射为另一个数组，映射方式是以原数组的元素作为输入，使用提供的回调函数对输入元素处理，处理后返回的结果作为新数组的元素。
基本语法
var new_array = arr.map(function callback(currentValue, index, array) {
// Return element for new_array
}[, thisArg])
callback: 回调函数，此回调函数将生成新数组的元素。它接收三个参数：
- currentValue: 当前的处理的元素
- index: 当前元素的索引
- array: 原数组
thisArg: 可选，在回调函数callback里表示this的值
示例：
给数组里的每一个元素+1
var numbers = [1, 4, 9];
var mappedNumbers= numbers.map(function(currentValue,index,array) {
array[1] = 16;
return currentValue + 1;
});
// mappedNumbers为映射后的数组，值为[2, 5, 10]
// numbers仍然为[1, 4, 9]，没有改变
使用Math.sqrt对数组的元素求开方
var numbers = [1, 4, 9];
var mappedNumbers= numbers.map(Math.sqrt);
// mappedNumbers为映射后的数组，值为[1, 2, 3]
// numbers仍然为[1, 4, 9]，没有改变
此示例里Math.sqrt函数将依次接收回调函数的三个值currentValue,index和array，但Math.sqrt()只接收一个参数，按照回调函数传入的顺序，它只接收currentValue，其他两个则忽略。
字符串使用map映射字符
获取每个字符的ASCII编码
var map = Array.prototype.map;
var a = map.call('Hello World', function(x) {
return x.charCodeAt(0);
});
// a now equals [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
误用
误用1：向map传递回调函数名，但回调函数的参数与map所要求回调函数参数不一致。
map的回调函数可以是一个函数名，如上面的例子Math.sqrt。
下面的例子是想把数组里的字符转换为int
['1', '2', '3'].map(parseInt);
// 期待结果为：[1, 2, 3]
// 结果实际为： [1, NaN, NaN]
函数parseInt的语法是：
parseInt(string, radix);
parseInt接收两个参数，map的回调函数的参数currentValue，index和array依次传递给parseInt，parseInt只接收currentValue和index，忽略array。
例子里执行三次分别为：
parseInt('1',0); //输出1
parseInt('2',1); //输出NaN
parseInt('3',2); //输出NaN
这种误用的原因就是回调函数的参数与map所要求的参数不一致。
上面的例子解决方法：
function returnInt(element) {
return parseInt(element, 10);
}
['1', '2', '3'].map(returnInt); // [1, 2, 3]
误用2：随意修改原来的数组
map回调函数的第三个参数为array，它为原数组。一般情况下回调函数不会对原数组多修改，如果在回调函数里对array参数的值做修改，可能会导致在函数外面调用原数组时出现不可预期的结果。
var numbers = [1, 4, 9];
var mappedNumbers= numbers.map(function(currentValue,index,array) {
array[1] = 16;
return currentValue + 1;
});
//原本期待输出结果[2, 5, 10]
// mappedNumbers实际为[2, 17, 10]
// numbers也发生改变[1, 16, 9]
