Javascript中內(nèi)建函數(shù)reduce的應(yīng)用詳解
前言
一般而言,可以通過(guò)reduce
方法實(shí)現(xiàn)的邏輯都可以通過(guò)forEach
方法來(lái)變相的實(shí)現(xiàn),雖然不清楚瀏覽器的js引擎是如何在C++層面實(shí)現(xiàn)這兩個(gè)方法,但是可以肯定的是reduce
方法肯定也存在數(shù)組的遍歷,在具體實(shí)現(xiàn)細(xì)節(jié)上是否針對(duì)數(shù)組項(xiàng)的操作和存儲(chǔ)做了什么優(yōu)化,則不得而知。
數(shù)組的reduce方法的應(yīng)用
reduce
方法有兩個(gè)參數(shù),第一個(gè)參數(shù)是一個(gè)callback
,用于針對(duì)數(shù)組項(xiàng)的操作;第二個(gè)參數(shù)則是傳入的初始值,這個(gè)初始值用于單個(gè)數(shù)組項(xiàng)的操作。需要注意的是,reduce
方法返回值并不是數(shù)組,而是形如初始值的經(jīng)過(guò)疊加處理后的操作。
reduce方法最常見(jiàn)的場(chǎng)景就是疊加。
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
函數(shù)根據(jù)初始值0,不斷的進(jìn)行疊加,完成最簡(jiǎn)單的總和的實(shí)現(xiàn)。
前文中也提到,reduce
函數(shù)的返回結(jié)果類型和傳入的初始值相同,上個(gè)實(shí)例中初始值為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方法可以完成多維度的數(shù)據(jù)疊加。如上例中的初始值{sum: 0}
,這僅僅是一個(gè)維度的操作,如果涉及到了多個(gè)屬性的疊加,如{sum: 0,totalInEuros: 0,totalInYen: 0}
,則需要相應(yīng)的邏輯進(jìn)行處理。
在下面的方法中,采用分而治之的方法,即將reduce
函數(shù)第一個(gè)參數(shù)callback
封裝為一個(gè)數(shù)組,由數(shù)組中的每一個(gè)函數(shù)單獨(dú)進(jìn)行疊加并完成reduce
操作。所有的一切通過(guò)一個(gè)manager
函數(shù)來(lái)管理流程和傳遞初始參數(shù)。
var manageReducers = function(reducers) { return function(state, item) { return Object.keys(reducers).reduce( function(nextState, key) { reducers[key](state, item); return state; }, {} ); } };
上面就是manager
函數(shù)的實(shí)現(xiàn),它需要reducers對(duì)象作為參數(shù),并返回一個(gè)callback
類型的函數(shù),作為reduce
的第一個(gè)參數(shù)。在該函數(shù)內(nèi)部,則執(zhí)行多維的疊加工作( Object.keys()
)。
通過(guò)這種分治的思想,可以完成目標(biāo)對(duì)象多個(gè)屬性的同時(shí)疊加,完整代碼如下:
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);
總結(jié)
以上就是Javascript中內(nèi)建函數(shù)reduce應(yīng)用的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能有所幫助,如果有疑問(wèn)大家可以留言交流。
相關(guān)文章
微信小程序開(kāi)發(fā)之實(shí)現(xiàn)選項(xiàng)卡(窗口頂部TabBar)頁(yè)面切換
本篇文章主要介紹了微信小程序開(kāi)發(fā)之選項(xiàng)卡(窗口頂部TabBar)頁(yè)面切換,具有一定的參考價(jià)值,有需要的可以了解一下。2016-11-11一個(gè)報(bào)數(shù)游戲js版(約瑟夫環(huán)問(wèn)題)
隨便給一個(gè)數(shù) 比如100,那么從1到100圍成一個(gè)圓圈,然后就類似123123報(bào)數(shù)一樣逢3就舍掉,一直這樣輪詢 那么最后剩下來(lái)的那個(gè)數(shù)是多少?2010-08-08判斷某個(gè)字符在一個(gè)字符串中是否存在的js代碼
這篇文章主要介紹了判斷某個(gè)字符在一個(gè)字符串中是否存在的方法,需要的朋友可以參考下2014-02-02深入理解JavaScript中async/await的錯(cuò)誤處理方式
在現(xiàn)代JavaScript開(kāi)發(fā)中,異步編程是不可或缺的一部分,async和await是一種強(qiáng)大的異步編程工具,它們使得編寫和維護(hù)異步代碼更加容易和清晰,然而,異步操作仍然可能會(huì)出現(xiàn)錯(cuò)誤,本文將深入探討async和await的錯(cuò)誤處理方式,提供詳細(xì)的代碼示例和解釋2023-09-09js實(shí)現(xiàn)百度地圖定位于地址逆解析,顯示自己當(dāng)前的地理位置
本文分享了基于javascript實(shí)現(xiàn)的百度地圖定位于地址逆解析,顯示自己當(dāng)前的地理位置的實(shí)例代碼,有興趣的朋友可以看下2016-12-12IE6/IE7中JavaScript json提示缺少標(biāo)識(shí)符、字符串或數(shù)字問(wèn)題處理
這篇文章主要介紹了IE6/IE7中JavaScript json提示缺少標(biāo)識(shí)符、字符串或數(shù)字問(wèn)題處理,需要的朋友可以參考下2014-12-12