js数组中的reduce方法

简单介绍

reduce可以对数组中的元素从index 0到length-1依次处理，每个元素的处理结果会作为处理下一个元素时所需要的参数，当所有元素处理结束后返回累积结果。

var a = [1,2,3,4]; 
a.reduce(function(a,b,index,array){ 
  console.log(a + " and " + b + " index:" + index);  
  return a+b; 
},1);
******************************************************
1 and 1 index:0
2 and 2 index:1
4 and 3 index:2
7 and 4 index:3
11

上述例子在chrome的console下运行后可看到结果，该例子传入了两个参数，callback为单纯的累加函数，initialValue为1
为什么会出现log这样的结果呢？接下来分析一下reduce的两个参数

---

参数callback与initialValue

官方给出的reduce使用方法如下

 arr.reduce(callback[,initialValue])

接收两个参数，第一个参数callback为必选，第二个initialValue为可选

callback

假设当前场景为正在对数组的第n元素进行callback处理

• accumulator：累加器，该参数的值为第n-1个元素处理后的返回值
• currentValue：该参数值为第n个元素的值
• currentIndex：第n个元素的index
• array：当前数组的引用

initialValue

callback的第一个参数为第n-1个参数处理后的返回值，可是如果n=1(即刚对第一个元素进行callback处理)时accumulator值是多少呢？
initialValue作用就在于解决第一次处理时accumulator值的问题，如果传入了initialValue，那么第一次callback中accumulator值等于initialValue

接下来根据例子来看initialValue存在与否对reduce执行流程的影响

var a = [1,2,3,4]; 
a.reduce(function(a,b,index,array){ 
  console.log(a + " and " + b + " index:" + index);  
  return a+b; 
});   //可选参数initialValue未传入
**************************************************************
1 and 2 index:1
3 and 3 index:2
6 and 4 index:3
10

与文章开篇的第一个例子对比可以发现，传入initialValue时callback执行了4次，未传入则执行了3次，数组明明有4个元素，这是什么原因呢？

reduce官方介绍说的非常清楚。

initialValue.png
大致意思就是说如果传入initialValue，则callback的accumulator值为initialValue，currentValue为arr[0]，如果未传入则accumulator值为arr[0]，currentValue为arr[1]
如果未传initialValue的话currentValue会从数组中第二个元素开始，第一个元素会充当accumulator，这也就解释了为何两个例子中callback执行次数不同。

应用

每一个新技术的出现都是为了解决一类问题，reduce也不例外，当我们想将数组元素或者元素中的某些内容累积时，reduce可以很方便的解决我们的问题。
具体应用请参考官方文档