基本概念
reduce() 方法接收一個函數作為累加器（accumulator），數組中的每個值（從左到右）開始縮減，最終為一個值。
reduce 為數組中的每一個元素依次執行回調函數，不包括數組中被刪除或從未被賦值的元素，接受四個參數：初始值（或者上一次回調函數的返回值），當前元素值，當前索引，調用 reduce 的數組。
語法:
arr.reduce(callback,[initialValue])
簡單應用
例1：
var items = [10, 120, 1000];// our reducer functionvar reducer = function add(sumSoFar, item) { return sumSoFar + item; };// do the jobvar total = items.reduce(reducer, 0);console.log(total); // 1130可以看出，reduce函數根據初始值0，不斷的進行疊加，完成最簡單的總和的實現。
reduce函數的返回結果類型和傳入的初始值相同，上個實例中初始值為number類型，同理，初始值也可為object類型。
例2：
var items = [10, 120, 1000];// our reducer functionvar reducer = function add(sumSoFar, item) { sumSoFar.sum = sumSoFar.sum + item; return sumSoFar;};// do the jobvar 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()方法詳解及高級技巧，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
