JS的內建函數reduce

目錄

• 數組的reduce方法的應用
• 多重疊加

@(js)

reduce函數，是ECMAScript5規範中出現的數組方法。在平時的工做中，相信你們使用的場景並很少，通常而言，能夠經過reduce方法實現的邏輯均可以經過forEach方法來變相的實現，雖然不清楚瀏覽器的js引擎是如何在C＋＋層面實現這兩個方法，可是能夠確定的是reduce方法確定也存在數組的遍歷，在具體實現細節上是否針對數組項的操做和存儲作了什麼優化，則不得而知。

---

數組的reduce方法的應用

reduce方法有兩個參數，第一個參數是一個callback，用於針對數組項的操做；第二個參數則是傳入的初始值，這個初始值用於單個數組項的操做。須要注意的是，reduce方法返回值並非數組，而是形如初始值的通過疊加處理後的操做。

reduce方法最多見的場景就是疊加。

var items = [10, 120, 1000];

// our reducer function
var reducer = function add(sumSoFar, item) { return sumSoFar + item; };

// do the job
var total = items.reduce(reducer, 0);

console.log(total); // 1130

能夠看出，reduce函數根據初始值0，不斷的進行疊加，完成最簡單的總和的實現。

前文中也提到，reduce函數的返回結果類型和傳入的初始值相同，上個實例中初始值爲number類型，同理，初始值也可爲object類型。

var items = [10, 120, 1000];

// our reducer function
var reducer = function add(sumSoFar, item) {
  sumSoFar.sum = sumSoFar.sum + item;
  return sumSoFar;
};

// do the job
var total = items.reduce(reducer, {sum: 0});

console.log(total); // {sum:1130}

多重疊加

使用reduce方法能夠完成多維度的數據疊加。如上例中的初始值{sum: 0}，這僅僅是一個維度的操做，若是涉及到了多個屬性的疊加，如{sum: 0,totalInEuros: 0,totalInYen: 0}，則須要相應的邏輯進行處理。

在下面的方法中，採用分而治之的方法，即將reduce函數第一個參數callback封裝爲一個數組，由數組中的每個函數單獨進行疊加並完成reduce操做。全部的一切經過一個manager函數來管理流程和傳遞初始參數。

var manageReducers = function(reducers) {
  return function(state, item) {
    return Object.keys(reducers).reduce(
      function(nextState, key) {
        reducers[key](state, item);
        return state;
      },
      {}
    );
  }
};

上面就是manager函數的實現，它須要reducers對象做爲參數，並返回一個callback類型的函數，做爲reduce的第一個參數。在該函數內部，則執行多維的疊加工做（Object.keys（））。

經過這種分治的思想，能夠完成目標對象多個屬性的同時疊加，完整代碼以下：

var reducers = {  
  totalInEuros : function(state, item) {
    return state.euros += item.price * 0.897424392;
  },
  totalInYen : function(state, item) {
    return state.yens += item.price * 113.852;
  }
};

var manageReducers = function(reducers) {
  return function(state, item) {
    return Object.keys(reducers).reduce(
      function(nextState, key) {
        reducers[key](state, item);
        return state;
      },
      {}
    );
  }
};

var bigTotalPriceReducer = manageReducers(reducers);

var initialState = {euros:0, yens: 0};

var items = [{price: 10}, {price: 120}, {price: 1000}];

var totals = items.reduce(bigTotalPriceReducer, initialState);

console.log(totals);