詳解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)文章
layui.use模塊外部使用其內(nèi)部定義的js封裝函數(shù)方法
今天小編就為大家分享一篇layui.use模塊外部使用其內(nèi)部定義的js封裝函數(shù)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細介紹了javascript創(chuàng)建對象的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
使用JS簡單實現(xiàn)apply、call和bind方法的實例代碼
在JavaScript中,call、apply和bind是Function對象自帶的三個方法,這三個方法的主要作用是改變函數(shù)中的this指向,下面這篇文章主要給大家介紹了關(guān)于如何使用JS簡單實現(xiàn)apply、call和bind方法的相關(guān)資料,需要的朋友可以參考下2022-02-02
擴展運算符（Spread Operator）和剩余參數(shù)（Rest Parameters）是JavaScript中的兩個非常有用的特性,實際應(yīng)用中,這些功能可以用于合并數(shù)組、復(fù)制對象屬性等操作,極大地提高了JavaScript編程的便利性和功能性,感興趣的朋友跟隨小編一起看看吧2024-09-09
就像人類會產(chǎn)生垃圾一樣，程序運行過程中也會產(chǎn)生垃圾，如果不及時回收輕則將會拖慢程序運行，重則會導(dǎo)致系統(tǒng)崩潰，也就是所謂的內(nèi)存泄漏。所以垃圾回收非常必要2022-10-10
本篇文章主要講訴了前端跨域問題的幾種解決方案，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
懸浮窗就是圖中微信圖標(biāo)的按鈕，采用fixed定位，可拖動和點擊。本文給大家分享一個比較常見的常見，通過實例代碼給大家介紹微信小程序中懸浮窗功能的實現(xiàn)，一起看看吧2019-08-08
這篇文章主要為大家詳細介紹了微信小程序仿美團城市選擇，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06
下面小編就為大家?guī)硪黄猨s方法數(shù)據(jù)驗證的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
Javascript中的事件對象其實和.NET中繼承自EventArgs類的派生類類似，用來給事件處理程序傳遞狀態(tài)信息，從而進行相應(yīng)的操作。這一篇文章將講述Javascript事件對象中和實現(xiàn)拖拽功能相關(guān)的幾個屬性，并在最后將IE事件模型和標(biāo)準(zhǔn)DOM事件模型的差異封裝到一個類中，從而適應(yīng)所有的瀏覽器。2008-09-09