淺談JS中 reduce() 的用法

過去有很長(zhǎng)一段時(shí)間,我一直很難理解 reduce() 這個(gè)方法的具體用法,平時(shí)也很少用到它。事實(shí)上,如果你能真正了解它的話,其實(shí)在很多地方我們都可以用得上,那么今天我們就來簡(jiǎn)單聊聊JS中 reduce() 的用法。

一、語(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è):prevcur。接下來我們跟著實(shí)例來看看具體用法吧~

二、實(shí)例

先提供一個(gè)原始數(shù)組:

var arr = [3,9,4,3,6,0,9];

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

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

var sum = arr.reduce(function (prev, cur) {
    return prev + cur;
},0);

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

2. 求數(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)。

3. 數(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)方法

1. reduceRight()

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

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

詳情請(qǐng)戳→簡(jiǎn)述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)是其他迭代方法無法企及的

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 第5章 引用類型(返回首頁(yè)) 本章內(nèi)容 使用對(duì)象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學(xué)一百閱讀 3,268評(píng)論 0 4
  • ??引用類型的值(對(duì)象)是引用類型的一個(gè)實(shí)例。 ??在 ECMAscript 中,引用類型是一種數(shù)據(jù)結(jié)構(gòu),用于將數(shù)...
    霜天曉閱讀 1,087評(píng)論 0 1
  • 什么是數(shù)組? 數(shù)組簡(jiǎn)單來說就是將所有的數(shù)據(jù)排成一排存放在系統(tǒng)分配的一個(gè)內(nèi)存塊上,通過使用特定元素的索引作為數(shù)組的下...
    啟明_b56f閱讀 942評(píng)論 0 0
  • 由于最近都在freecodecamp上刷代碼,運(yùn)用了很多JavaScript數(shù)組的方法,因此做了一份關(guān)于JavaS...
    2bc5f46e925b閱讀 1,999評(píng)論 0 16
  • 多年以前,我就想說一些事,關(guān)于他的。 我與他什么都沒有,就連朋友,也是覺得有那么一絲隔閡。 高中畢業(yè)時(shí),或許是我和...
    阿bu呦閱讀 570評(píng)論 0 3