淺談JS中 reduce() 的用法

gplane 發(fā)布于2019-08-23 16:41 / 424人閱讀

摘要：一語(yǔ)法其中，表示將要原數(shù)組表示上一次調(diào)用回調(diào)時(shí)的返回值，或者初始值表示當(dāng)前正在處理的數(shù)組元素表示當(dāng)前正在處理的數(shù)組元素的索引，若提供值，則索引為，否則索引為表示初始值。

一、語(yǔ)法

arr.reduce(function(prev,cur,index,arr){
...
}, init);

其中，
arr 表示將要原數(shù)組；
prev 表示上一次調(diào)用回調(diào)時(shí)的返回值，或者初始值 init;
cur 表示當(dāng)前正在處理的數(shù)組元素；
index 表示當(dāng)前正在處理的數(shù)組元素的索引，若提供 init 值，則索引為0，否則索引為1；
init 表示初始值。
看上去是不是感覺很復(fù)雜？沒關(guān)系，只是看起來而已，其實(shí)常用的參數(shù)只有兩個(gè)：prev 和 cur。接下來我們跟著實(shí)例來看看具體用法吧~

二、實(shí)例

先提供一個(gè)原始數(shù)組：
var arr = [3,9,4,3,6,0,9];

實(shí)現(xiàn)以下需求的方式有很多，其中就包含使用reduce()的求解方式，也算是實(shí)現(xiàn)起來比較簡(jiǎn)潔的一種吧。

求數(shù)組項(xiàng)之和

var sum = arr.reduce(function (prev, cur) {

return prev + cur;

},0);## 標(biāo)題文字 ##

由于傳入了初始值0，所以開始時(shí)prev的值為0，cur的值為數(shù)組第一項(xiàng)3，相加之后返回值為3作為下一輪回調(diào)的prev值，然后再繼續(xù)與下一個(gè)數(shù)組項(xiàng)相加，以此類推，直至完成所有數(shù)組項(xiàng)的和并返回。

求數(shù)組項(xiàng)最大值

==========

var max = arr.reduce(function (prev, cur) {

return Math.max(prev,cur);

});

由于未傳入初始值，所以開始時(shí)prev的值為數(shù)組第一項(xiàng)3，cur的值為數(shù)組第二項(xiàng)9，取兩值最大值后繼續(xù)進(jìn)入下一輪回調(diào)。

數(shù)組去重

var newArr = arr.reduce(function (prev, cur) {

prev.indexOf(cur) === -1 && prev.push(cur);
return prev;

},[]);

實(shí)現(xiàn)的基本原理如下：
① 初始化一個(gè)空數(shù)組
② 將需要去重處理的數(shù)組中的第1項(xiàng)在初始化數(shù)組中查找，如果找不到（空數(shù)組中肯定找不到），就將該項(xiàng)添加到初始化數(shù)組中
③ 將需要去重處理的數(shù)組中的第2項(xiàng)在初始化數(shù)組中查找，如果找不到，就將該項(xiàng)繼續(xù)添加到初始化數(shù)組中
④ ……
⑤ 將需要去重處理的數(shù)組中的第n項(xiàng)在初始化數(shù)組中查找，如果找不到，就將該項(xiàng)繼續(xù)添加到初始化數(shù)組中
⑥ 將這個(gè)初始化數(shù)組返回

三、其他相關(guān)方法

reduceRight()

該方法用法與reduce()其實(shí)是相同的，只是遍歷的順序相反，它是從數(shù)組的最后一項(xiàng)開始，向前遍歷到第一項(xiàng)。

forEach()、map()、every()、some()和filter()

重點(diǎn)總結(jié)：

reduce() 是數(shù)組的歸并方法，與forEach()、map()、filter()等迭代方法一樣都會(huì)對(duì)數(shù)組每一項(xiàng)進(jìn)行遍歷，但是reduce() 可同時(shí)將前面數(shù)組項(xiàng)遍歷產(chǎn)生的結(jié)果與當(dāng)前遍歷項(xiàng)進(jìn)行運(yùn)算，這一點(diǎn)是其他迭代方法無法企及的