js reduce()

是什麼

ES5提供的數組的方法。
reduce() 方法接收一個函數作爲回調函數（accumulator），數組中的每個值（從左到右）開始縮減（其實就是從左往右開始對每個數執行回調函數），最終爲一個值。

PS: 回調函數的返回結果類型和傳入的初始值相同

語法以及參數

arr.reduce(  callback(accumulator, currentValue,index ,array ) ,initialValue )

initialValue 可選

如果有的話則作爲，第一次調用 callback函數時的第一個參數的值。
如果沒有提供初始值，callback則使用數組的第一個元素，作爲第一次調用的初始值。
在沒有初始值的空數組上調用 reduce 將報錯。

accumulator

默認傳入上一次調用回調函數的的返回值。
初始值： initialValue存在的話，則是initialValue 若沒有則是數組的第一個元素

currentValue

數組中正在處理的元素。

index 可選

數組中正在處理的當前元素的索引。 如果提供了initialValue，則起始索引號爲0，否則從索引1起始。

array可選

調用reduce()的數組

一個小小的例子

例1 無initialValue

var  arr = [1, 2, 3, 4, 5];
sum = arr.reduce(function(result, cur, index, arr) {
    console.log(result, cur, index,arr);
    return result+ cur;
})
console.log(sum) // 最後的結果是15

	result	cur	index	arr
第1次	1	2	1	[1, 2, 3, 4, 5]
第2次	3	3	2	[1, 2, 3, 4, 5]
第3次	6	4	3	[1, 2, 3, 4, 5]
第4次	10	5	4	[1, 2, 3, 4, 5]

例2 有initialValue 傳入10

var  arr = [1, 2, 3, 4, 5];
sum = arr.reduce(function(result, cur, index, arr) {
    console.log(result, cur, index,arr);
    return result+ cur;
},10)
console.log(sum) // 最後的結果是25

	result	cur	index	arr
第1次	10	1	0	[1, 2, 3, 4, 5]
第2次	11	2	1	[1, 2, 3, 4, 5]
第3次	13	3	2	[1, 2, 3, 4, 5]
第4次	16	4	3	[1, 2, 3, 4, 5]
第5次	20	5	4	[1, 2, 3, 4, 5]

回調函數的返回值

上面的例子返回的都是一個整型數字，如果希望返回其他類型的數據呢？

這個就跟accumulator的初始值有關係了。
下面的例子我們傳入的是一個object {sum: 0}

var items = [0,1,2,3,4];
var reducer = function add(sumT, item) {
  console.log(sumT)
  sumT.sum = sumT.sum + item;
  return sumT;
};
var total = items.reduce(reducer, {sum: 0});
console.log(total); // {sum:1130}

運行結果

 {sum: 0}
 {sum: 1}
 {sum: 3}
 {sum: 6}
 {sum: 10}

reduce()的應用

1. 數組扁平化

遞歸+reduce

let arr = [1, 2, '3js', [4, 5, [6], [7, 8, [9, 10, 11], null, 'abc'], {age: 12}, [13, 14]], '[]'];

function flatten(arr) {
  if(Array.isArray(arr)) {
    return arr.reduce((prev, cur) => {
       // 如果遍歷的當前項是數組，遞歸調用flatten
      return Array.isArray(cur) ? prev.concat(flatten(cur)) : prev.concat(cur)
    }, [])
  } else {
    throw new Error(' 當前參數不是數組')
  }
}
console.log(flatten(arr));

PS:這裏的throw new Error只是用來判斷一開始的arr，這是因爲在遞歸只傳入數組。