陣列的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)

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/285936.html

標籤：JavaScript

上一篇：JavaScript 11 節點

下一篇：陣列扁平化的幾種方式