介紹

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

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

我們來舉個(gè)例子大家就很明白了。

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

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

這個(gè)方法是如何工作的呢？

reduce接受一個(gè)函數(shù)，函數(shù)有四個(gè)參數(shù)，分別是：

     1、上一次的值;

     2、當(dāng)前值;

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

     4、數(shù)組;

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

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

得到的結(jié)果是：

分析一下這個(gè)結(jié)果，這個(gè)回調(diào)函數(shù)共調(diào)用了4次，因?yàn)榈谝淮螞]有previousValue，所以直接從數(shù)組的第二項(xiàng)開始，一只調(diào)用到數(shù)組結(jié)束。

reduce還有第二個(gè)參數(shù)，我們可以把這個(gè)參數(shù)作為第一次調(diào)用callback時(shí)的第一個(gè)參數(shù)，上面這個(gè)例子因?yàn)闆]有第二個(gè)參數(shù)，所以直接從數(shù)組的第二項(xiàng)開始，如果我們給了第二個(gè)參數(shù)為5，那么結(jié)果就是這樣的：

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

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

reduce可以幫助我們輕松的完成很多事，除了累加，還有扁平化一個(gè)二維數(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é)

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

最新評(píng)論