JavaScript Array map()函数的用法及误用

时间:2022-06-01 16:42:07

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]