js的数组知识之深入理解map和reduce

版权声明：本文为博主原创文章，未经博主允许不得转载。

js的数组知识之深入理解map和reduce

js的数组中定义了两个方法，一个map()和一个reduce()的方法，map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组，Array的reduce()把一个函数作用在这个Array的[x1, x2, x3…]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算。具体阐述分别如下：

1、map()的具体用法

map()方法是一个高阶函数，接受一个代用返回值的函数，使得每一个数组元素都会调用这个指定的方法后形成一个新数组。例如：

function number(x) {
    return x * x;
}

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(number); // [1, 4, 9, 16, 25, 36, 49, 64, 81]

当然我们也可以采用循环的方式来实现map()的这种操作，但是map()作为高阶函数，事实上它把运算规则抽象了，因此，我们不但可以计算简单的上述操作，还可以计算任意复杂的函数，例如，我们可以快速的将一个数字数组转化为字符串数组：

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']

map的误区

有时候在使用map的时候也会出现误区，例如，把一个字符串数字转化为数字，可能会出现意想不到的结果，大家想想下面这个的值为什么呢?

var a=['1', '2', '3'].map(parseInt);
//a的值为什么呢？

直接看上去结果为：a=[1,2,3] ，但是实际上a=[1,NaN,NaN]，操着这个的原因是我们需要理解map和parseInt的具体原理。

说明： map会给callback传输三个参数，第一个参数是元素本身，第二个参数是元素的索引值，第三个是原数组，而parseInt可以接受一个参数，也可以接受两个参数，接受一个参数的时候该参数直接为需要转化的字符串；接受两个参数的时候：第一个参数是要转为数字的字符串，第二参数是要转化的进制。

在js中参数的个数不需要严格一致，所以这样下来map的前两个参数都自动传给了parseInt，就会导致parseInt接受了不存在的进制(第二个参数一般为2，8，10，16)而显示NaN。所以需要正常显示就需要让parseInt接受一个值或者将其第二个值默认为10，具体代码如下：

方法一：

var a=['1', '2', '3'].map(function(x){return parseInt(x);});

方法二：

var oldParseInt=parseInt;
window.parseInt=function(x){
   return oldParseInt(x,10);
}
a = ['1', '2', '3'].map(parseInt);

因此，因为map的传值特性，给一个使用该特性的例子，该例子的x为元素本身，y为元素所在的索引值，具体代码如下：

'use strict';            
 var a=[1,2,3,4,5,6,7,8,9,10];
 function f(x,y){
     return x+y;
 }
 alert(a.map(f));//1,3,5,7,9,11,13,15,17,19

2、reduce()的具体用法

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终为一个值。具体为Array的reduce()把一个函数作用在这个Array的[x1, x2, x3…]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算，其效果就是：

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

重点说明：

arr.reduce(callback[, initialValue]) — More From MDN
callback（一个在数组中每一项上调用的函数，接受四个函数：）
previousValue（上一次调用回调函数时的返回值，或者初始值）
currentValue（当前正在处理的数组元素）
currentIndex（当前正在处理的数组元素下标）
array（调用reduce()方法的数组）
initialValue（可选的初始值。作为第一次调用回调函数时传给previousValue的值）

比方说对一个Array阶乘，就可以用reduce实现：

var arr = [1, 2, 3, 4, 5];
arr.reduce(function (x, y) {
    return x * y;
}); // 120

最后来一个结合map和reduce方法的例子，以此来巩固map和reduce的知识，代码如下：

+(function(s){
    return s.split('').map(function(x){return x*1;}).reduce(function(x,y){return x*10+y});
})('54321'); //输出数字：54321

欢迎大家相互交流和指点~