基本概念
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 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);
新聞熱點
疑難解答
圖片精選