詳解JS數(shù)組Reduce()方法詳解及高級(jí)技巧
基本概念
reduce() 方法接收一個(gè)函數(shù)作為累加器（accumulator），數(shù)組中的每個(gè)值（從左到右）開(kāi)始縮減，最終為一個(gè)值。
reduce 為數(shù)組中的每一個(gè)元素依次執(zhí)行回調(diào)函數(shù)，不包括數(shù)組中被刪除或從未被賦值的元素，接受四個(gè)參數(shù)：初始值（或者上一次回調(diào)函數(shù)的返回值），當(dāng)前元素值，當(dāng)前索引，調(diào)用 reduce 的數(shù)組。
語(yǔ)法:
arr.reduce(callback,[initialValue])
- callback （執(zhí)行數(shù)組中每個(gè)值的函數(shù)，包含四個(gè)參數(shù)）
- previousValue （上一次調(diào)用回調(diào)返回的值，或者是提供的初始值（initialValue））
- currentValue （數(shù)組中當(dāng)前被處理的元素）
- index （當(dāng)前元素在數(shù)組中的索引）
- array （調(diào)用 reduce 的數(shù)組）
- initialValue （作為第一次調(diào)用 callback 的第一個(gè)參數(shù)。）
簡(jiǎn)單應(yīng)用
例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函數(shù)根據(jù)初始值0，不斷的進(jìn)行疊加，完成最簡(jiǎn)單的總和的實(shí)現(xiàn)。
reduce函數(shù)的返回結(jié)果類型和傳入的初始值相同，上個(gè)實(shí)例中初始值為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}
進(jìn)階應(yīng)用
使用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);
在來(lái)一個(gè)例子：
某同學(xué)的期末成績(jī)?nèi)缦卤硎?/p>
var result = [
{
subject: 'math',
score: 88
},
{
subject: 'chinese',
score: 95
},
{
subject: 'english',
score: 80
}
];
如何求該同學(xué)的總成績(jī)？
var sum = result.reduce(function(prev, cur) {
return cur.score + prev;
}, 0);
假設(shè)該同學(xué)因?yàn)檫`紀(jì)被處罰在總成績(jī)總扣10分，只需要將初始值設(shè)置為-10即可。
var sum = result.reduce(function(prev, cur) {
return cur.score + prev;
}, -10);
我們來(lái)給這個(gè)例子增加一點(diǎn)難度。假如該同學(xué)的總成績(jī)中，各科所占的比重不同，分別為50%，30%，20%，我們應(yīng)該如何求出最終的權(quán)重結(jié)果呢？
解決方案如下：
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);
再看一個(gè)例子，如何知道一串字符串中每個(gè)字母出現(xiàn)的次數(shù)？
var arrString = 'abcdaabc';
arrString.split('').reduce(function(res, cur) {
res[cur] ? res[cur] ++ : res[cur] = 1
return res;
}, {})
由于可以通過(guò)第二參數(shù)設(shè)置疊加結(jié)果的類型初始值，因此這個(gè)時(shí)候reduce就不再僅僅只是做一個(gè)加法了，我們可以靈活的運(yùn)用它來(lái)進(jìn)行各種各樣的類型轉(zhuǎn)換，比如將數(shù)組按照一定規(guī)則轉(zhuǎn)換為對(duì)象，也可以將一種形式的數(shù)組轉(zhuǎn)換為另一種形式的數(shù)組，大家可以動(dòng)手去嘗試一樣。
[1, 2].reduce(function(res, cur) {
res.push(cur + 1);
return res;
}, [])
koa的源碼中，有一個(gè)only模塊，整個(gè)模塊就一個(gè)簡(jiǎn)單的返回reduce方法操作的對(duì)象：
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;
}, {});
};
通過(guò)對(duì)reduce概念的理解，這個(gè)模塊主要是想新建并返回一個(gè)obj對(duì)象中存在的keys的object對(duì)象。
var a = {
env : 'development',
proxy : false,
subdomainOffset : 2
}
only(a,['env','proxy']) // {env:'development',proxy : false}
總結(jié)
以上所述是小編給大家介紹的詳解JS數(shù)組Reduce()方法詳解及高級(jí)技巧，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- JavaScript中reduce()方法的使用詳解
- js中的reduce()函數(shù)講解
- 詳解JavaScript中數(shù)組的reduce方法
- js數(shù)組方法reduce經(jīng)典用法代碼分享
- JS使用reduce()方法處理樹(shù)形結(jié)構(gòu)數(shù)據(jù)
- JavaScript中自帶的 reduce()方法使用示例詳解
- JavaScript中reduce()的5個(gè)基本用法示例
- JavaScript中reduce()詳解及使用方法
- JS數(shù)組方法reduce的妙用分享
- JavaScript中的reduce方法執(zhí)行過(guò)程、使用場(chǎng)景及進(jìn)階用法
相關(guān)文章
javascript實(shí)現(xiàn)倒計(jì)時(shí)并彈窗提示特效
倒計(jì)時(shí)的功能在我們做項(xiàng)目的時(shí)候會(huì)經(jīng)常遇到，這里給大家分享的是個(gè)人編寫(xiě)的一個(gè)簡(jiǎn)易的效果代碼，有需要的小伙伴可以參考下2015-06-06
three.js實(shí)現(xiàn)3D模型展示的示例代碼
本篇文章主要介紹了three.js實(shí)現(xiàn)3D模型展示的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
Uncaught?SyntaxError:Unexpected?token?'<'?(
這篇文章主要為大家介紹了JS判斷趨近于直線的多邊形(退化多邊形)實(shí)例探究，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2024-01-01
JavaScript trim 實(shí)現(xiàn)去除字符串首尾指定字符的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇JavaScript trim 實(shí)現(xiàn)去除字符串首尾指定字符的簡(jiǎn)單方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
在寫(xiě)原生的Javascript的時(shí)候，因?yàn)镮E的JS引擎與標(biāo)準(zhǔn)瀏覽器的JS引擎之間總有那么些差異，所以經(jīng)常會(huì)去判斷是否是IE瀏覽器2014-04-04
這篇文章主要給大家介紹了關(guān)于JavaScript的十大取整方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
JavaScript中的this陷阱的最全收集并整理(沒(méi)有之一)
這篇文章主要介紹了JavaScript中的this陷阱的最全收集,需要的朋友可以參考下2017-02-02
Electron是一款流行的跨平臺(tái)框架,用于構(gòu)建桌面應(yīng)用程序,它基于Web技術(shù)棧,結(jié)合了Chromium和Node.js,可以使用HTML、CSS和JavaScript開(kāi)發(fā)跨平臺(tái)的應(yīng)用程序,本文將介紹electron版本升級(jí)的簡(jiǎn)單步驟,并提供相應(yīng)的源代碼示例,需要的朋友可以參考下2024-05-05
關(guān)于textarea的直觀換行的一些研究材料...2006-10-10
js判斷undefined類型,undefined,null, 的區(qū)別詳細(xì)解析
本篇文章主要是對(duì)js判斷undefined類型,undefined,null,NaN的區(qū)別進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12