js reduce實現二維數組縱向和

reduce() 的用法詳解

 

過去有很長一段時間，我一直很難理解 reduce() 這個方法的具體用法，平時也很少用到它。事實上，如果你能真正瞭解它的話，其實在很多地方我們都可以用得上，那麼今天我們就來簡單聊聊JS中 reduce() 的用法。

一、語法

arr.reduce(function(prev,cur,index,arr){
...
}, init);

其中，
arr 表示原數組；
prev 表示上一次調用回調時的返回值，或者初始值 init;
cur 表示當前正在處理的數組元素；
index 表示當前正在處理的數組元素的索引，若提供 init 值，則索引爲0，否則索引爲1；
init 表示初始值。

看上去是不是感覺很複雜？沒關係，只是看起來而已，其實常用的參數只有兩個：prev 和 cur。接下來我們跟着實例來看看具體用法吧~

二、實例

先提供一個原始數組：

var arr = [3,9,4,3,6,0,9];

實現以下需求的方式有很多，其中就包含使用reduce()的求解方式，也算是實現起來比較簡潔的一種吧。

1. 求數組項之和

var sum = arr.reduce(function (prev, cur) {
    return prev + cur;
},0);

由於傳入了初始值0，所以開始時prev的值爲0，cur的值爲數組第一項3，相加之後返回值爲3作爲下一輪迴調的prev值，然後再繼續與下一個數組項相加，以此類推，直至完成所有數組項的和並返回。

2. 求數組項最大值

var max = arr.reduce(function (prev, cur) {
    return Math.max(prev,cur);
});

由於未傳入初始值，所以開始時prev的值爲數組第一項3，cur的值爲數組第二項9，取兩值最大值後繼續進入下一輪迴調。

3. 數組去重

var newArr = arr.reduce(function (prev, cur) {
    prev.indexOf(cur) === -1 && prev.push(cur);
    return prev;
},[]);

實現的基本原理如下：

① 初始化一個空數組
② 將需要去重處理的數組中的第1項在初始化數組中查找，如果找不到（空數組中肯定找不到），就將該項添加到初始化數組中
③ 將需要去重處理的數組中的第2項在初始化數組中查找，如果找不到，就將該項繼續添加到初始化數組中
④ ……
⑤ 將需要去重處理的數組中的第n項在初始化數組中查找，如果找不到，就將該項繼續添加到初始化數組中
⑥ 將這個初始化數組返回

4. 數組中各列之和

var arr = [ { data: [1,3,6] }, { data: [7, 8, 9] }, { data: [10, 8, 6] } ];

var newArr = arr.reduce((prev, { data }) => 
    data.map((v, k) => r[k] + v )
, Array(arr[0].data.length).fill(0));
// console.log(newArr)  [18, 19, 21 ]

三、其他相關方法

1. reduceRight()

該方法用法與reduce()其實是相同的，只是遍歷的順序相反，它是從數組的最後一項開始，向前遍歷到第一項。

2. forEach()、map()、every()、some()和filter()

詳情請戳→簡述forEach()、map()、every()、some()和filter()的用法

重點總結：

reduce() 是數組的歸併方法，與forEach()、map()、filter()等迭代方法一樣都會對數組每一項進行遍歷，但是reduce() 可同時將前面數組項遍歷產生的結果與當前遍歷項進行運算，這一點是其他迭代方法無法企及的