首頁 > web前端 > js教程 > 主體

詳解JavaScript中數組的reduce方法

高洛峰
發布: 2016-12-28 09:35:08
原創
1514 人瀏覽過

介紹

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

你一定也跟我一樣看的有點迷糊,其實reduce接收的就是一個回呼函數,去呼叫陣列裡的每一項,直到陣列結束。

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

假設我有一串數組,數組裡放的全是數字,我要算出這些數字的總和是多少。正常情況下我們會循環,然後一個個加,有了reduce就不用那麼麻煩了,只用一行程式碼。

var total = [0,1,2,3,4].reduce((a, b)=>a + b); //10
登入後複製

   

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

reduce接受一個函數,函數有四個參數,分別是:

     1、上一次的值;

     2、目前值;

  我們還是以上面那個陣列為例,把這幾個參數印出來看看:

[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){
 return previousValue + currentValue;
});
登入後複製

   

得到的結果是:

分析一下這個結果,這個回調是這個結果,這個回調了4次,因為共呼第一次沒有previousValue,所以直接從陣列的第二項開始,一隻呼叫到陣列結束。

詳解JavaScript中數組的reduce方法reduce還有第二個參數,我們可以把這個參數當作第一次呼叫callback時的第一個參數,上面這個例子因為沒有第二個參數,所以直接從陣列的第二項開始,如果我們給了第二個參數是5,那麼結果就是這樣的:

[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){
 return previousValue + currentValue;
},5);
登入後複製

   

第一次調用的previousValue的值就用傳入的第二個參數代替,函數被調用了5次,也就是數組的length。

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

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
 return a.concat(b);
}, []);
// flattened == [0, 1, 2, 3, 4, 5]
登入後複製

   

總結

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

更多詳解JavaScript中數組的reduce方法相關文章請關注PHP中文網!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板