摘要：我們?cè)诘牡诙€(gè)參數(shù)里面初始了回調(diào)函數(shù)第一個(gè)參數(shù)的類型和值，將字符串轉(zhuǎn)化為數(shù)組，那么迭代的結(jié)果將是一個(gè)對(duì)象，對(duì)象的每一項(xiàng)值就是字符串的字母。
因?yàn)橛胒or循環(huán)被老大鄙視之后，這幾天都在偷偷摸摸的研究數(shù)組的那幾個(gè)迭代方法。使用下來(lái)，感覺(jué)確實(shí)妙用無(wú)窮，仿佛自己的逼格在無(wú)形中變得高大了一點(diǎn)點(diǎn)，哈哈，上一篇文章的簡(jiǎn)單介紹確實(shí)有點(diǎn)糙，因此決定重新一些總結(jié)文章。
這篇文章就是專門(mén)總結(jié)reduce方法的，這個(gè)方法大有可研究的地方，值得大家get它并去同手實(shí)踐一下。
上一篇文章我認(rèn)為reduce是一個(gè)聚合或者減少方法，它可以將數(shù)組中的每一項(xiàng)通過(guò)疊加變成一項(xiàng)，但是其實(shí)這種說(shuō)法似乎不太準(zhǔn)確。先不管這個(gè)，我們來(lái)看看例子再說(shuō)。
從最簡(jiǎn)單的例子開(kāi)始。
var arr = [1, 2, 3, 4, 5];
sum = arr.reduce(function(prev, cur, index, arr) {
console.log(prevres, cur, index);
return prevres + cur;
})
console.log(arr, sum);
輸出結(jié)果
1 2 1
3 3 2
6 4 3
10 5 4
[1, 2, 3, 4, 5] 15
我們先重新回顧一下reduce中回調(diào)函數(shù)的參數(shù)，這個(gè)回調(diào)函數(shù)中有4個(gè)參數(shù)，意思分別為
prev: 第一項(xiàng)的值或者上一次疊加的結(jié)果值
cur: 當(dāng)前會(huì)參與疊加的項(xiàng)
index： 當(dāng)前值的索引
arr: 數(shù)組本身
首先我們要區(qū)分prev與cur這2個(gè)參數(shù)的區(qū)別，剛開(kāi)始的時(shí)候我以為他們是一種類型的，可是后來(lái)我發(fā)現(xiàn)我理解錯(cuò)了。prev表示每次疊加之后的結(jié)果，類型可能與數(shù)組中的每一項(xiàng)不同，而cur則表示數(shù)組中參與疊加的當(dāng)前項(xiàng)。在后邊我們可以結(jié)合實(shí)例來(lái)理解這個(gè)地方。
其次我們看到，上例中其實(shí)值遍歷了4次，數(shù)組有五項(xiàng)。數(shù)組中的第一項(xiàng)被當(dāng)做了prev的初始值，而遍歷從第二項(xiàng)開(kāi)始。
我們看下面一個(gè)例子。
某同學(xué)的期末成績(jī)?nèi)缦卤硎?/p>
var result = [
{
subject: "math",
score: 88
},
{
subject: "chinese",
score: 95
},
{
subject: "english",
score: 80
}
];
如何求該同學(xué)的總成績(jī)？
很顯然，利用for循環(huán)可以很簡(jiǎn)單得出結(jié)論
var sum = 0;
for(var i=0; i
但是我們的宗旨就是拋棄for循環(huán)，因此使用reduce來(lái)搞定這個(gè)問(wèn)題
var sum = result.reduce(function(prev, cur) {
return cur.score + prev;
}, 0);
這個(gè)時(shí)候，我給reduce參數(shù)添加了第二個(gè)參數(shù)。通過(guò)打印我發(fā)現(xiàn)設(shè)置了這個(gè)參數(shù)之后，reduce遍歷便已經(jīng)從第一項(xiàng)開(kāi)始了。
這第二個(gè)參數(shù)就是設(shè)置prev的初始類型和初始值，比如為0，就表示prev的初始值為number類型，值為0，因此，reduce的最終結(jié)果也會(huì)是number類型。
因?yàn)榈诙€(gè)參數(shù)為累計(jì)結(jié)果的初始值，因此假設(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) {
console.log(prev);
return cur.score + prev;
}, -10);
var qsum = result.reduce(function(prev, cur) {
return prev + cur.score * dis[cur.subject]
}, 0)
console.log(sum, qsum);
為了計(jì)算出權(quán)重之后的總值，我們?cè)诨卣{(diào)函數(shù)內(nèi)部修改了數(shù)組當(dāng)前項(xiàng)，是使他和權(quán)重比例關(guān)聯(lián)襲來(lái)，并重新返回一個(gè)一樣的回調(diào)函數(shù)，將新修改的當(dāng)前項(xiàng)傳入，就和之前的例子是一樣的了。
在segmentfault上看到一個(gè)面試題，問(wèn)如何知道一串字符串中每個(gè)字母出現(xiàn)的次數(shù)？
我們可以運(yùn)用reduce來(lái)解決這個(gè)問(wèn)題。
我們?cè)趓educe的第二個(gè)參數(shù)里面初始了回調(diào)函數(shù)第一個(gè)參數(shù)的類型和值，將字符串轉(zhuǎn)化為數(shù)組，那么迭代的結(jié)果將是一個(gè)對(duì)象，對(duì)象的每一項(xiàng)key值就是字符串的字母。運(yùn)行感受一下吧。
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;
}, [])
這種特性使得reduce在實(shí)際開(kāi)發(fā)中大有可為！但是需要注意點(diǎn)，在ie9一下的瀏覽器中，并不支持該方法 ！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/21757.html
