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]

版权声明:著作权归作者所有。

相关推荐

Rxjs expand的用法分析

Rxjs的expand()函数声明:public expand(project: function(value: T, index: number), concurrent: number, scheduler: Scheduler): Observable expand()会递归调用project函数,project函数把源值映射为一个Observable,每次递归

理解JavaScript普通函数以及箭头函数里使用的this

this普通函数的this普通函数的this是由动态作用域决定,它总指向于它的直接调用者。具体可以分为以下四项:this总是指向它的直接调用者, 例如 obj.func() ,那么func()里的this指的是obj。在默认情况(非严格模式,未使用 'use strict'),如果函数没有直接调用者,this为window在严格模式下,如果函数没有

Python切片符号(:)用法及示例

Python的切片符号语法s[start:end:step] s:被切片的对象start:切片迭代的起始索引end:切片迭代的终止索引,但end索引不包含在切片内step:切片步长其中,start,end和step都可以被忽略。切片索引示意图简单用法>>> s = [0,1,2,3,4,5,6,7,8,9] >>> s[1

JavaScript:Map根据值查找对应的键

Map根据值查找键,可以使用for..of迭代Map的Entry,再判断Entry的值:键值一对一function getByValue(map, searchValue) {   for (let [key, value] of map.entries()) {