詳解數組中的reduce方法

Charles 發布于2019-08-23 14:08 / 1321人閱讀

摘要：有沒有覺得很神奇呀去除數組中重復的元素結果分析這里主要是借助迭代功能實現數組的擴展，判斷當前元素是否已經添加到數組中，如果不存在就從尾部添加，這個方法在去重方法中應該算比較簡單高效的。

前言

?這幾天面試被問到了數組的方法有哪些，回答得簡直一塌糊涂，面試官說reduce的功能很強大，于是想對這個方法進行總結，在紅寶書中對這個方法的描述并不算多，我也是參考了其他文章才進行總結的，下面就開始吧~

reduce的原理 簡介

?在紅寶書中，將這個方法定義為數組的歸并方法，這個方法和迭代方法（map,forEach,filter...）一樣，都會對數組進行遍歷，reduce與他們不同的是函數的第一個參數得到的是迭代計算后的效果（看不懂沒關系，繼續往下看就會懂了）

語法

?這個方法接收兩個參數：

要執行的函數，要執行的函數中也可傳入參數，分別為

prev：上次調用函數的返回值

cur：當前元素

index：當前元素索引

arr：被遍歷的數組

函數迭代的初始值

舉例

沒有設置函數的初始迭代值

let arr = [1, 2, 3, 4];
let sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);

運行結果：

分析：
?我們可以看到，在這里reduce的作用就是對這個數組進行求和，迭代了3次，函數迭代的初始值是1，也就是默認值（數組的第一項），prev的值是每次計算后的值，現在理解了吧！

設置初始迭代值

let arr = [1, 2, 3, 4];
let sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
},5)
console.log(arr, sum);

運行結果：

分析：
?這里我們添加了一個初始的迭代值，也就是讓prev從5開始計算，可以看到，這里迭代了4次，結果也加上了初始值。

reduce的應用 初級應用

?最常見的應用一般就是求和以及求乘積了，比如說下面的例子：

let arr = [1,2,3,4,5]
console.log(arr.reduce((a,b) => a + b))//15
console.log(arr.reduce((a,b) => a * b))//120

高級應用 計算數組中每個元素出現的次數

let arr = ["name","age","long","short","long","name","name"] 

let arrResult = arr.reduce((pre,cur) =>{
    console.log(pre,cur)
    if(cur in pre){
        pre[cur]++
    }else{
        pre[cur] = 1
    }
    return pre
},{})

console.log(arrResult)//結果：{name: 3, age: 1, long: 2, short: 1}

運行結果：（第一個console.log）

分析：
?大概的解釋一下，運行過程是這樣的：

由于設置了迭代初始值，pre的第一個值是一個空對象，此時cur為name，然后進行判斷，發現在pre中沒有name屬性，所以就將name對應的屬性值賦為1；

后面沒有重復的是一樣的道理，如果碰到重復值，就會將該屬性值加1，這樣就能計算元素重復的次數了。（有沒有覺得很神奇呀~）

去除數組中重復的元素

let arrResult = arr.reduce((pre,cur) =>{
    if(!pre.includes(cur)){
        pre.push(cur)
    }
    return pre;
},[])

console.log(arrResult)//結果：["name", "age", "long", "short"]

分析：
?這里主要是借助迭代功能實現數組的擴展，判斷當前元素是否已經添加到數組中，如果不存在就從尾部添加，這個方法在去重方法中應該算比較簡單高效的。

對對象的屬性求和

let person = [
    {
        name: "xiaoming",
        age: 18
    },{
        name: "xiaohong",
        age: 17
    },{
        name: "xiaogang",
        age: 19
    }
]

let result = person.reduce((a,b) =>{
    a = a + b.age;
    return a;
},0)

console.log(result)//結果：54

分析：
?這里主要就是利用reduce第一個參數是迭代，可以通過初始化這個參數的數據類型，達到想實現的效果。

總結

?使用reduce操作數組時，最重要的就是理解第一個參數是怎么迭代的，可以好好利用初始化這個參數的數據類型來減少很多不必要的代碼。上面舉的三個高級應用的例子都是利用了這個優點，當然，reduce還有更多的應用，后面碰到還會進行補充的。

?如果覺得有用就給個贊吧~

云服務器 GPU云服務器數組方法reduce reduce方法方法參數詳解方法簽名詳解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/100153.html

JS進階篇--JS數組reduce()方法詳解及高級技巧

摘要：基本概念方法接收一個函數作為累加器，數組中的每個值從左到右開始縮減，最終為一個值。例進階應用使用方法可以完成多維度的數據疊加。在該函數內部，則執行多維的疊加工作。參考的內建函數數組方法的高級技巧基本概念 reduce() 方法接收一個函數作為累加器（accumulator），數組中的每個值（從左到右）開始縮減，最終為一個值。 reduce 為數組中的每一個元素依次執行回調函數，不包括...

jerryloveemily 2019-08-21 12:00 評論0 收藏0
javascript reduce詳解及應用

摘要：循環數組每一項數組下標當前調用數組本身可選初始值，作為回調函數第一個參數的默認值，也是每次回調的返回值，見代碼首頁問題轉化為數組首頁問題轉化后效果這個栗子來自配置路由時遇到的，當時也是優化了好幾個版本。 reduce callback（一個在數組中每一項上調用的函數，接受四個參數：）previousValue（上一次調用回調函數時的返回值，或者初始值）currentValue（當前正...

Cruise_Chan 2019-08-23 14:17 評論0 收藏0
js的parseInt() map()，reduce()方法詳解

摘要：比的函數多一個參數初始值，最終值，因為方法數組每次輸入兩個元素。 parseInt(string，radius)接收兩個參數， string（必選）如果接受的是‘abc’，純字符串，返回NaN,要是‘123’會轉化為123，要是‘abc123’會轉化為123，radius（可選）表示的是基數，指定前面的string是一個幾進制的數（不是將string轉化為多少進制，而是這個string...

zzir 2019-08-21 16:17 評論0 收藏0
Javascript數組詳解

摘要：創建數組判斷比是否是個數組取數組元素屬性返回數組的成員數量。增加數組元素方法在數組的末尾增加一個或多個元素，并返回數組的新長度。表示要移除的數組元素的個數要添加進數組的元素最主要的的用途是向數組的中部插入元素。數組的定義數組是按序號排列的一組值，每個值的位置都有編號（從0開始）。數組本質上是一種特殊的對象。它的鍵名是按（0，1，2...）排列的一組數字。創建數組： var a...

geekidentity 2019-08-21 14:05 評論0 收藏0
redux middleware 詳解

摘要：執行完后，獲得數組，，它保存的對象是圖中綠色箭頭指向的匿名函數，因為閉包，每個匿名函數都可以訪問相同的，即。是函數式編程中的組合，將中的所有匿名函數，，組裝成一個新的函數，即新的，當新執行時，，從左到右依次執行所以順序很重要。前言 It provides a third-party extension point between dispatching anaction, and t...

yanwei 2019-08-19 17:39 評論0 收藏0