數組的reduce方法詳細解

前言

很多前端開發中都知道數組的reduce方法可以用來給數組求和，但是你問到里面的具體參數代表的時候什么，很多人卻不知道。所以在工作中也是很少人會用到這個方法。現在我就通過這篇文章給大家詳細講解一下，並通過幾個案例給大家展開

reduce方法

下面是api的使用和每個參數代表的含義：

arr.reduce((prev,cur,index,arr)=>{

},init)

• arr: 表示將要原數組

• prev:表示上一次調用回調時的返回值，或者初始值init

• cur:表示當前正在處理的數組元素

• index:表示正在處理的數組元素的索引，若提供init值，則索引為0，否則索引為1

• init: 表示初始值

案例

 數組求和

const arr = [1,2,3,4,5,6,7]
const sum = arr.reduce((pre,cur)=>{
return pre +cur
})
console.log(sum)

數組求和方法是這個reduce方法最常見的使用案例了，但是很多人只知道返回pre + cur就能返回總和，如果我稍微把這個方法下面這樣呢

const arr = [1,2,3,4,5,6,7]
const sum = arr.reduce((pre,cur)=>{
return pre +cur
},2)
console.log(sum)

大家覺得結果還是一樣的嗎
答案顯然是否定的，下面我給大家解釋解釋：

• 首先我們要明確的時候，pre表示的是上一次回調時的返回值，或者是初始值init。
• 在我們第一次調用的時候，第一個案例是沒有設置init的值，在沒有設置init值的情況下，index的索引值是從1，其實是第一次的時候就隱式調用了pre+cur，你可以理解為是在背后做了pre是0+cur:1。我們在控制台看到的就是整個計算過程是index是1-6。
• 在第二個案例中，init設置的值是2，那么就是代表pre的初始值就是2，那么第一次的時候，index是從0開始的,第一次調用返回的就是`2+arr[1]`=3,整個過程index執行是從0-6，共7次

結果：第一個是28，第二個因為初始值就是2，即從2開始加，所以是30

計算數組中每個元素出現的次數

let person = ['李白','雅典娜','安琪拉','李白','諸葛亮','安琪拉']
let nameObj = person.reduce((pre,cur) =>{
if( cur in pre){
pre[cur]++
}
else{
pre[cur] = 1
}
return pre
}, {})
console.log(nameObj) // {李白: 2, 雅典娜: 1, 安琪拉: 2, 諸葛亮: 1}

數組扁平化

const arr2 = [1,[2,[3,[4,5]]],6]
const newArr = (arr) => {
return arr.reduce((pre,cur)=>{
return pre.concat(Array.isArray(cur) ? newArr(cur) : cur)
},[])
}
console.log(newArr(arr2)) // [1, 2, 3, 4, 5, 6]

這個方法是使用了遞歸的方法結合reduce實現的。當然實現數組扁平化的方式不止這一種，后面我會另起一篇給大家列舉數組扁平化的幾種方法

數組去重

const arr3 = [1,2,3,4,5,3,2,1,6,4,7,8]
const resultArr = arr3.reduce((pre,cur)=>{
if(!pre.includes(cur)){
return pre.concat(cur)
}
else{
return pre
}
},[])
console.log(resultArr)