詳解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就不用那么麻煩了,只用一行代碼。
var total = [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ù)組:
var flattened = [[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í)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。
相關(guān)文章
iframe 自適應(yīng)高度[在IE6 IE7 FF下測試通過]
有時候我們需要讓我們的iframe自動適應(yīng)高度,但多瀏覽器兼容性不好,大家不妨試下這個。2009-04-04TypeScript使用函數(shù)重載確定返回類型的實現(xiàn)方法
這篇文章主要介紹了TypeScript使用函數(shù)重載確定返回類型的實現(xiàn)方法,文中通過代碼示例講解的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-03-03chatGPT前端流式輸出js實現(xiàn)三種方法—fetch、SSE、websocket
項目需要接入chatgpt提供的api,后端返回流式的字符,前端接收并實時顯示,在JavaScript中,使用Stream流通常指的是處理數(shù)據(jù)流的一種方式,它們允許數(shù)據(jù)被處理成塊,而不是一次性處理整個數(shù)據(jù)集,這對于處理大量數(shù)據(jù)或者來自網(wǎng)絡(luò)請求的數(shù)據(jù)非常有用,2024-07-07用JS編寫一個函數(shù),返回數(shù)組中重復(fù)出現(xiàn)過的元素(實例)
下面小編就為大家?guī)硪黄肑S編寫一個函數(shù),返回數(shù)組中重復(fù)出現(xiàn)過的元素(實例)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09javascript中利用柯里化函數(shù)實現(xiàn)bind方法【推薦】
下面小編就為大家?guī)硪黄猨avascript中利用柯里化函數(shù)實現(xiàn)bind方法【推薦】。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考,一起跟隨小編過來看看吧2016-04-04