一文吃透js中的Array.reduce方法

前言

我們經常會用到 Array 物件的 reduce 方法，把它用於做一些計算、或者資料組合，發現自己用了那麼多年 reduce ，竟然還不是很瞭解它，最近才發現如果不傳遞初始值，它也可以正常進行，陣列也可以是一個函數陣列，來增強我們的程式碼。

本篇文章將帶你重來了解 Array.reduce 和運用場景。

重新瞭解 Array.reduce

我們來看一下 MDN 怎麼描述它的：

reduce() 方法對陣列中的每個元素按序執行一個由您提供的 reducer 函數，每一次執行 reducer 會將先前元素的計算結果作為引數傳入，最後將其結果彙總為單個返回值。

我們來看一下這段程式碼：

const arr = [1, 2, 3]
const initValue = 10;
function reducer(previousValue, currentValue, currentIndex, arrryTarget) {
    return preValue + currentValue
}
arr.reduce(reducer, initValue) // res === 16

reduce 會遍歷 arr 陣列，陣列有多少個，reducer 就會執行多少次。執行過程每一次的引數（arrryTarget都是一樣的，因此沒有意義，除非在遍歷過程中直接改變了原陣列，因此這裡不考慮）如下：

這個過程用過 reduce 的應該都知道，MDN 上原話是這樣的：

第一次執行回撥函數時，不存在「上一次的計算結果」。如果需要回撥函數從陣列索引為 0 的元素開始執行，則需要傳遞初始值。否則，陣列索引為 0 的元素將被作為初始值 initialValue，迭代器將從第二個元素開始執行（索引為 1 而不是 0）

也就是第一次執行 reducer 函數時，不存在「上一次的計算結果」。這裡傳遞了初始值，因此 reducer 函數才從陣列索引為 0 的元素開始執行，也就是 arr.length 等於 reducer 執行次數。

但如果不傳遞初始值呢？我們改動一下程式碼：

const arr = [1, 2, 3]
- const initValue = 10;
function reducer(previousValue, currentValue, currentIndex, arrryTarget) {
    return preValue + currentValue
}
- arr.reduce(reducer, initValue) // res === 16
+ arr.reduce(reducer) // res === 6

這時候 reducer 只會執行 arr.length - 1 次。執行過程每一次的引數如下：

因為沒有傳遞初始值，因此 reducer 函數從陣列索引為 1 的元素開始執行，首次執行的時候 arr[0] 被作為了 previousValue ，currentValue 為是 arr[1]。

現在了 reduce 的基本用法，那麼它的運用場景有哪些呢？

reduce 的運用場景

用於計算資料

因為 reducer 函數會重複執行 array.length 或者 array.length - 1，因此特別適合做一些計算。

比如累加，計算訂單總金額等案例：

const orders = [{ id: 1, amount: 10 }, { id: 2, amount: 12 }, { id: 3, amount: 5 }]
const totalAmount = orders.reduce((sum, order) => sum + order.amount, 0); // 27

累加可以，那麼 加減乘除 中其他三個的原理是一樣的，這裡不用多說，肯定是可以的，甚至加上 與 、非的計算也是可以的，比如

[true, true, false, true].reduce((a, b) => a & b); // 有false，按照與邏輯，一定會是false

將多維陣列轉為一維陣列

reduce 可以很輕鬆的將二維陣列轉為一維陣列。範例：

[[1,2], [3, 4]].reduce((arrA, arrB) => [...arrA, ...arrB])

那是不是封裝一下就可以把多維陣列組轉為一維陣列了？當然可以：

function flaten(arr) {
    if(!Array.isArray(arr)) {
        return arr;
    }
    return arr.reduce((result, item) => {
        // 不是陣列，則直接放在陣列末尾
        if(!Array.isArray(item)) {
            result.push(item);
            return result;
        }
        return result.concat(flaten(item))
    }, [])
}
flaten([1,2, [3, 4], [6, [7, 8]]]) // [1, 2, 3, 4, 6, 7, 8]

這樣就很簡單的實現一個深層次的 flaten 。

將函數作為引數

將函數作為引數的話，運用場景在哪裡？比如：

[func1, func2. func3, func4].reduce((value, funcN) => funcN(value), value)，

執行順序： func1 => func2 => func3 => func4，

這個效果就和 pipe 很像了是不是？這樣封裝一下就可以讓函數執行扁平化。而不是 func1(func2(func3(func4(value)))) 這樣看著難受。有一篇詳細的描述了將函數作為引數來實現 pipe 和 compose 函數的過程，有興趣可以。

其他場景

其實還描述了很多使用場景，大家都可以去探索一下，總之 reduce 的功能很強大，俗稱「萬金油」不是沒有道理的。

這裡就簡單列一下：

• 計算陣列中每個元素出現的次數（如果元素是物件，也可以計算某個值出現的次數）
• 按屬性對 object 分類
• 使用擴充套件運運算元和 initialValue 繫結包含在物件陣列中的陣列
• 陣列去重
• 使用 .reduce() 替換 .filter() 或者 .map()，可以替換當然也可以實現。
• 按順序執行 Promise
• .....

最後

js中其實有很多函數功能都很強大，這些函數的強大其實還是因為js本身的機制帶來的，函數在js中是一等公民，註定會逐漸影響我們的編碼風格，因此大家可以去了解和學習函數語言程式設計，它能讓你的程式碼寫的更輕鬆。