摘要:基本概念方法接收一個函數作為累加器,數組中的每個值從左到右開始縮減,最終為一個值。例進階應用使用方法可以完成多維度的數據疊加。在該函數內部,則執行多維的疊加工作。參考的內建函數數組方法的高級技巧
基本概念 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方法的高級技巧
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/87346.html
摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...
摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...
閱讀 2465·2021-09-29 09:34
閱讀 3301·2021-09-23 11:21
閱讀 2495·2021-09-06 15:00
閱讀 1123·2019-08-30 15:44
閱讀 2024·2019-08-29 17:23
閱讀 2996·2019-08-29 16:44
閱讀 3053·2019-08-29 13:13
閱讀 1932·2019-08-28 18:12