JavaScript中數(shù)組的reduce方法

介紹

我們先來看看這個方法的官方概述:reduce()方法接收一個函數(shù)作為累加器(accumulator),數(shù)組中的每個值(從左到右)開始縮減,最終為一個值。

你一定也和我一樣看的有點迷糊,其實reduce接收的就是一個回調(diào)函數(shù),去調(diào)用數(shù)組里的每一項,直到數(shù)組結(jié)束。


我們來舉個例子大家就很明白了。

假設(shè)我有一串?dāng)?shù)組,數(shù)組里放的全是數(shù)字,我要算出這些數(shù)字的總和是多少。正常情況下我們會循環(huán),然后一個個加,有了reduce就不用那么麻煩了,只用一行代碼。

vartotal = [0,1,2,3,4].reduce((a, b)=>a + b);//10

這個方法是如何工作的呢?

reduce接受一個函數(shù),函數(shù)有四個參數(shù),分別是:

1、上一次的值;

2、當(dāng)前值;

3、當(dāng)前值的索引;

4、數(shù)組;

我們還是以上面那個數(shù)組為例,把這幾個參數(shù)打印出來看看:

[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){

return previousValue + currentValue;

});

得到的結(jié)果是:


分析一下這個結(jié)果,這個回調(diào)函數(shù)共調(diào)用了4次,因為第一次沒有previousValue,所以直接從數(shù)組的第二項開始,一只調(diào)用到數(shù)組結(jié)束。

reduce還有第二個參數(shù),我們可以把這個參數(shù)作為第一次調(diào)用callback時的第一個參數(shù),上面這個例子因為沒有第二個參數(shù),所以直接從數(shù)組的第二項開始,如果我們給了第二個參數(shù)為5,那么結(jié)果就是這樣的:

[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){

return previousValue + currentValue;

},5);


第一次調(diào)用的previousValue的值就用傳入的第二個參數(shù)代替,函數(shù)被調(diào)用了5次,也就是數(shù)組的length。

reduce可以幫助我們輕松的完成很多事,除了累加,還有扁平化一個二維數(shù)組:

varflattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {

? ? return ?a.concat(b);

}, []);

// flattened == [0, 1, 2, 3, 4, 5]

總結(jié)

我暫時能想到的常用的就這兩個,不過肯定還有很多地方能用到啦。以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,238評論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,430評論 3 415
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,134評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,893評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 71,653評論 6 408
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,136評論 1 323
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,212評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,372評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,888評論 1 334
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 40,738評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,939評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,482評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,179評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,588評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,829評論 1 283
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,610評論 3 391
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 47,916評論 2 372

推薦閱讀更多精彩內(nèi)容

  • 定義和用法:reduce() 方法接收一個函數(shù)作為累加器,數(shù)組中的每個值(從左到右)開始縮減,最終計算為一個值。注...
    黃懟懟閱讀 851評論 0 0
  • 第5章 引用類型(返回首頁) 本章內(nèi)容 使用對象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學(xué)一百閱讀 3,261評論 0 4
  • 86.復(fù)合 Cases 共享相同代碼塊的多個switch 分支 分支可以合并, 寫在分支后用逗號分開。如果任何模式...
    無灃閱讀 1,400評論 1 5
  • 今天,在這里立一個Flag! 今天周四,沒什么特別,稀松平常。 也就是一天不吃飯,但不覺餓。朋友羨慕地看我說:你這...
    我是王嘉譯閱讀 471評論 0 0
  • 一個人, 一杯白開水。 日子,怎么就過到了淡若清水? 偷偷地守住心里那份單純, 怕被歲月無情剝奪。 心里不厭其煩的...
    喂魚的Tom閱讀 346評論 0 1