詳解數(shù)組中的reduce方法

Charles 發(fā)布于2019-08-23 14:08 / 1316人閱讀

摘要：有沒有覺得很神奇呀去除數(shù)組中重復(fù)的元素結(jié)果分析這里主要是借助迭代功能實(shí)現(xiàn)數(shù)組的擴(kuò)展，判斷當(dāng)前元素是否已經(jīng)添加到數(shù)組中，如果不存在就從尾部添加，這個方法在去重方法中應(yīng)該算比較簡單高效的。

前言

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

reduce的原理 簡介

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

語法

?這個方法接收兩個參數(shù)：

要執(zhí)行的函數(shù)，要執(zhí)行的函數(shù)中也可傳入?yún)?shù)，分別為

prev：上次調(diào)用函數(shù)的返回值

cur：當(dāng)前元素

index：當(dāng)前元素索引

arr：被遍歷的數(shù)組

函數(shù)迭代的初始值

舉例

沒有設(shè)置函數(shù)的初始迭代值

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);

運(yùn)行結(jié)果：

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

設(shè)置初始迭代值

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);

運(yùn)行結(jié)果：

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

reduce的應(yīng)用 初級應(yīng)用

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

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

高級應(yīng)用 計(jì)算數(shù)組中每個元素出現(xiàn)的次數(shù)

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)//結(jié)果：{name: 3, age: 1, long: 2, short: 1}

運(yùn)行結(jié)果：（第一個console.log）

分析：
?大概的解釋一下，運(yùn)行過程是這樣的：

由于設(shè)置了迭代初始值，pre的第一個值是一個空對象，此時cur為name，然后進(jìn)行判斷，發(fā)現(xiàn)在pre中沒有name屬性，所以就將name對應(yīng)的屬性值賦為1；

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

去除數(shù)組中重復(fù)的元素

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

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

分析：
?這里主要是借助迭代功能實(shí)現(xiàn)數(shù)組的擴(kuò)展，判斷當(dāng)前元素是否已經(jīng)添加到數(shù)組中，如果不存在就從尾部添加，這個方法在去重方法中應(yīng)該算比較簡單高效的。

對對象的屬性求和

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)//結(jié)果：54

分析：
?這里主要就是利用reduce第一個參數(shù)是迭代，可以通過初始化這個參數(shù)的數(shù)據(jù)類型，達(dá)到想實(shí)現(xiàn)的效果。

總結(jié)

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

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