詳解數組中的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還有更多的應用，後面碰到還會進行補充的。

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