簡單介紹

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

應用

每一個新技術的出現都是為了解決一類問題，reduce也不例外，當我們想將數組元素或者元素中的某些內容累積時，reduce可以很方便的解決我們的問題。
具體應用請參考官方文檔