摘要:我們在的第二個參數(shù)里面初始了回調(diào)函數(shù)第一個參數(shù)的類型和值,將字符串轉(zhuǎn)化為數(shù)組,那么迭代的結(jié)果將是一個對象,對象的每一項值就是字符串的字母。
因為用for循環(huán)被老大鄙視之后,這幾天都在偷偷摸摸的研究數(shù)組的那幾個迭代方法。使用下來,感覺確實妙用無窮,仿佛自己的逼格在無形中變得高大了一點點,哈哈,上一篇文章的簡單介紹確實有點糙,因此決定重新一些總結(jié)文章。
這篇文章就是專門總結(jié)reduce方法的,這個方法大有可研究的地方,值得大家get它并去同手實踐一下。
上一篇文章我認為reduce是一個聚合或者減少方法,它可以將數(shù)組中的每一項通過疊加變成一項,但是其實這種說法似乎不太準確。先不管這個,我們來看看例子再說。
從最簡單的例子開始。
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ù),這個回調(diào)函數(shù)中有4個參數(shù),意思分別為
prev: 第一項的值或者上一次疊加的結(jié)果值
cur: 當前會參與疊加的項
index: 當前值的索引
arr: 數(shù)組本身
首先我們要區(qū)分prev與cur這2個參數(shù)的區(qū)別,剛開始的時候我以為他們是一種類型的,可是后來我發(fā)現(xiàn)我理解錯了。prev表示每次疊加之后的結(jié)果,類型可能與數(shù)組中的每一項不同,而cur則表示數(shù)組中參與疊加的當前項。在后邊我們可以結(jié)合實例來理解這個地方。
其次我們看到,上例中其實值遍歷了4次,數(shù)組有五項。數(shù)組中的第一項被當做了prev的初始值,而遍歷從第二項開始。
我們看下面一個例子。
某同學的期末成績?nèi)缦卤硎?/p>
var result = [ { subject: "math", score: 88 }, { subject: "chinese", score: 95 }, { subject: "english", score: 80 } ];
如何求該同學的總成績?
很顯然,利用for循環(huán)可以很簡單得出結(jié)論
var sum = 0; for(var i=0; i但是我們的宗旨就是拋棄for循環(huán),因此使用reduce來搞定這個問題
var sum = result.reduce(function(prev, cur) { return cur.score + prev; }, 0);這個時候,我給reduce參數(shù)添加了第二個參數(shù)。通過打印我發(fā)現(xiàn)設置了這個參數(shù)之后,reduce遍歷便已經(jīng)從第一項開始了。
這第二個參數(shù)就是設置prev的初始類型和初始值,比如為0,就表示prev的初始值為number類型,值為0,因此,reduce的最終結(jié)果也會是number類型。
因為第二個參數(shù)為累計結(jié)果的初始值,因此假設該同學因為違紀被處罰在總成績總扣10分,只需要將初始值設置為-10即可。
var sum = result.reduce(function(prev, cur) { return cur.score + prev; }, -10);我們來給這個例子增加一點難度。假如該同學的總成績中,各科所占的比重不同,分別為50%,30%,20%,我們應該如何求出最終的權重結(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);為了計算出權重之后的總值,我們在回調(diào)函數(shù)內(nèi)部修改了數(shù)組當前項,是使他和權重比例關聯(lián)襲來,并重新返回一個一樣的回調(diào)函數(shù),將新修改的當前項傳入,就和之前的例子是一樣的了。
在segmentfault上看到一個面試題,問如何知道一串字符串中每個字母出現(xiàn)的次數(shù)?
我們可以運用reduce來解決這個問題。
我們在reduce的第二個參數(shù)里面初始了回調(diào)函數(shù)第一個參數(shù)的類型和值,將字符串轉(zhuǎn)化為數(shù)組,那么迭代的結(jié)果將是一個對象,對象的每一項key值就是字符串的字母。運行感受一下吧。
var arrString = "abcdaabc"; arrString.split("").reduce(function(res, cur) { res[cur] ? res[cur] ++ : res[cur] = 1 return res; }, {})由于可以通過第二參數(shù)設置疊加結(jié)果的類型初始值,因此這個時候reduce就不再僅僅只是做一個加法了,我們可以靈活的運用它來進行各種各樣的類型轉(zhuǎn)換,比如將數(shù)組按照一定規(guī)則轉(zhuǎn)換為對象,也可以將一種形式的數(shù)組轉(zhuǎn)換為另一種形式的數(shù)組,大家可以動手去嘗試一樣。
[1, 2].reduce(function(res, cur) { res.push(cur + 1); return res; }, [])這種特性使得reduce在實際開發(fā)中大有可為!但是需要注意點,在ie9一下的瀏覽器中,并不支持該方法 !
文章版權歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/79957.html
摘要:基本概念方法接收一個函數(shù)作為累加器,數(shù)組中的每個值從左到右開始縮減,最終為一個值。例進階應用使用方法可以完成多維度的數(shù)據(jù)疊加。在該函數(shù)內(nèi)部,則執(zhí)行多維的疊加工作。參考的內(nèi)建函數(shù)數(shù)組方法的高級技巧 基本概念 reduce() 方法接收一個函數(shù)作為累加器(accumulator),數(shù)組中的每個值(從左到右)開始縮減,最終為一個值。 reduce 為數(shù)組中的每一個元素依次執(zhí)行回調(diào)函數(shù),不包括...
摘要:我們在的第二個參數(shù)里面初始了回調(diào)函數(shù)第一個參數(shù)的類型和值,將字符串轉(zhuǎn)化為數(shù)組,那么迭代的結(jié)果將是一個對象,對象的每一項值就是字符串的字母。 因為用for循環(huán)被老大鄙視之后,這幾天都在偷偷摸摸的研究數(shù)組的那幾個迭代方法。使用下來,感覺確實妙用無窮,仿佛自己的逼格在無形中變得高大了一點點,哈哈,上一篇文章的簡單介紹確實有點糙,因此決定重新一些總結(jié)文章。 這篇文章就是專門總結(jié)reduce方法...
摘要:我們在的第二個參數(shù)里面初始了回調(diào)函數(shù)第一個參數(shù)的類型和值,將字符串轉(zhuǎn)化為數(shù)組,那么迭代的結(jié)果將是一個對象,對象的每一項值就是字符串的字母。 因為用for循環(huán)被老大鄙視之后,這幾天都在偷偷摸摸的研究數(shù)組的那幾個迭代方法。使用下來,感覺確實妙用無窮,仿佛自己的逼格在無形中變得高大了一點點,哈哈,上一篇文章的簡單介紹確實有點糙,因此決定重新一些總結(jié)文章。 這篇文章就是專門總結(jié)reduce方法...
本文主要介紹一些JS中用到的小技巧,可以在日常Coding中提升幸福度,將不定期更新~ 1. 類型強制轉(zhuǎn)換 1.1 string強制轉(zhuǎn)換為數(shù)字 可以用*1來轉(zhuǎn)化為數(shù)字(實際上是調(diào)用.valueOf方法)然后使用Number.isNaN來判斷是否為NaN,或者使用 a !== a 來判斷是否為NaN,因為 NaN !== NaN 32 * 1 // 32 ds * 1 ...
閱讀 1988·2021-11-19 09:40
閱讀 1931·2021-09-28 09:36
閱讀 2279·2021-09-22 10:02
閱讀 2724·2019-08-30 14:00
閱讀 1948·2019-08-29 15:31
閱讀 2893·2019-08-29 15:11
閱讀 2905·2019-08-29 13:04
閱讀 1080·2019-08-27 10:55