JS進階篇--JS數組reduce()方法詳解及高級技巧

基本概念

reduce() 方法接收一個函數做爲累加器（accumulator），數組中的每一個值（從左到右）開始縮減，最終爲一個值。

reduce 爲數組中的每個元素依次執行回調函數，不包括數組中被刪除或從未被賦值的元素，接受四個參數：初始值（或者上一次回調函數的返回值），當前元素值，當前索引，調用 reduce 的數組。

語法:

arr.reduce(callback,[initialValue])

• callback （執行數組中每一個值的函數，包含四個參數）

  • previousValue （上一次調用回調返回的值，或者是提供的初始值（initialValue））
  • currentValue （數組中當前被處理的元素）
  • index （當前元素在數組中的索引）
  • array （調用 reduce 的數組）
• initialValue （做爲第一次調用 callback 的第一個參數。）

簡單應用

例1：

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類型。

例2：

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);

在來一個例子：
某同窗的期末成績以下表示

var result = [
    {
        subject: 'math',
        score: 88
    },
    {
        subject: 'chinese',
        score: 95
    },
    {
        subject: 'english',
        score: 80
    }
];

如何求該同窗的總成績？

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

假設該同窗由於違紀被處罰在總成績總扣10分，只須要將初始值設置爲-10便可。

var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, -10);

咱們來給這個例子增長一點難度。假如該同窗的總成績中，各科所佔的比重不一樣，分別爲50%，30%，20%，咱們應該如何求出最終的權重結果呢？

解決方案以下：

var dis = {
    math: 0.5,
    chinese: 0.3,
    english: 0.2
}

var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, -10);

var qsum = result.reduce(function(prev, cur) {
    return cur.score * dis[cur.subject] + pre;
}, 0)

console.log(sum, qsum);

再看一個例子，如何知道一串字符串中每一個字母出現的次數？

var arrString = 'abcdaabc';

arrString.split('').reduce(function(res, cur) {
    res[cur] ? res[cur] ++ : res[cur] = 1
    return res;
}, {})

因爲能夠經過第二參數設置疊加結果的類型初始值，所以這個時候reduce就再也不僅僅只是作一個加法了，咱們能夠靈活的運用它來進行各類各樣的類型轉換，好比將數組按照必定規則轉換爲對象，也能夠將一種形式的數組轉換爲另外一種形式的數組，你們能夠動手去嘗試同樣。

[1, 2].reduce(function(res, cur) { 
    res.push(cur + 1); 
    return res; 
}, [])

koa的源碼中，有一個only模塊，整個模塊就一個簡單的返回reduce方法操做的對象：

var only = function(obj, keys){
  obj = obj || {};
  if ('string' == typeof keys) keys = keys.split(/ +/);
  return keys.reduce(function(ret, key){
    if (null == obj[key]) return ret;
    ret[key] = obj[key];
    return ret;
  }, {});
};

經過對reduce概念的理解，這個模塊主要是想新建並返回一個obj對象中存在的keys的object對象。

var a = {
    env : 'development',
    proxy : false,
    subdomainOffset : 2
}
only(a,['env','proxy'])   // {env:'development',proxy : false}

參考

JS的內建函數reduce
數組reduce方法的高級技巧