Array的 map() 和 reduce()

Posted 2021-02-16 huwt

map()

map() 方法返回一个新数组，新数组中的元素为原始数组中的元素依次调用参数中的函数处理后的值。

map() 方法不会对空数组进行检测，也不会修改原数组。

语法：

array.map(function (currentValue, index, arr), thisValue)

参数说明：

注意：

在使用它的时候要特别注意参数函数中的参数，如果参数与(currentValue, index, arr)有冲突，可以考虑对参数函数做些修改后再传入。例如下面这个示例：

// 我们想使用下面的代码把arr中的字符串全都转换为整数

var arr = [‘1‘, ‘2‘, ‘3‘, ‘4‘];
console.log(arr.map(parseInt));

// 但输出结果却为：[ 1, NaN, NaN, NaN ]

 这是因为parseInt()接受两个参数string,和radix，所以parseInt会把map()传的index参数当作radix，而redix为将字符串要解析成的进制数，以此就可以分析出为什么会出现NAN了。

// 我们可以使用装饰器的思想对parseInt做如下修改
var arr = [‘1‘, ‘2‘, ‘3‘, ‘4‘];
var oldParseInt = parseInt;
parseInt = function(x) {
    return oldParseInt(x, 10);
}
console.log(arr.map(parseInt));    // 输出结果为：[ 1, 2, 3, 4 ]

 

 

reduce()

reduce() 方法接受一个函数作为累加器，数组中的值从左到右开始计算，最终返回计算出来的一个值。reduce() 对于空数组不会执行回调。当数组中只有一个元素时无论参数函数是什么，reduce都返回数组中的唯一元素。

可以这样理解reduce：

[x1, x2, x3, x4].reduce(f) --> f(f(f(x1, x2), x3), x4)

语法：

array.reduce(function(total, currentVal, currentIndex, arr), inintialValue);

参数说明：

示例：

var arr = [1];
var f = function(x, y) {
    return x + 10;
}
console.log(arr.reduce(f));    //输出整数1

 

var arr = [1, 2, 3, 4];
var f = function(x, y) {
    return x*10 + y;
}
console.log(arr.reduce(f));    //输出整数1234