JS的內建函式reduce
@(js)
reduce函式,是ECMAScript5規範中出現的陣列方法。在平時的工作中,相信大家使用的場景並不多,一般而言,可以通過reduce方法實現的邏輯都可以通過forEach方法來變相的實現,雖然不清楚瀏覽器的js引擎是如何在C++層面實現這兩個方法,但是可以肯定的是reduce方法肯定也存在陣列的遍歷,在具體實現細節上是否針對陣列項的操作和儲存做了什麼優化,則不得而知。
[TOC]
陣列的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);