詳解數組中的reduce方法

前言

 這幾天面試被問到了數組的方法有哪些，回答得簡直一塌糊塗，面試官說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）

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

1. 因爲設置了迭代初始值，pre的第一個值是一個空對象，此時cur爲name，而後進行判斷，發如今pre中沒有name屬性，因此就將name對應的屬性值賦爲1；
2. 後面沒有重複的是同樣的道理，若是碰到重複值，就會將該屬性值加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還有更多的應用，後面碰到還會進行補充的。

 若是以爲有用就給個贊吧~