JavaScript數(shù)組常用方法---reduce

reduce()

1、語法

arr.reduce((pre, cur, index, arr) => {
    pre  // 上一次調(diào)用的返回值,或者是初始值initialValue
    cur  //  數(shù)組當(dāng)前處理的元素
    index  //  數(shù)組當(dāng)前處理元素的下標(biāo)(索引)
    arr  //  當(dāng)前調(diào)用reduce的數(shù)組
    initialValue  //  第一次循環(huán)調(diào)用的初始值 pre
}, initialValue)

2、詳解initialValue參數(shù)

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

打印結(jié)果
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10

從這段代碼可以看出,reduce遍歷數(shù)組是從index=1開始的,pre的第一次的值是數(shù)組的第一個(gè)值,數(shù)組長度是4,遍歷了3次。
再看:

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

打印結(jié)果
0 1 0
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10

這段代碼是從index=0開始遍歷的,pre的第一次的值是初始值0,共遍歷了4次。

得出結(jié)論:
如果沒有提供initialValue,reduce 會從索引1的地方開始執(zhí)行 callback 方法,跳過第一個(gè)索引。如果提供initialValue,從索引0開始。

注意:
當(dāng)數(shù)組為空的時(shí)候,不提供initialValue會報(bào)錯(cuò)

const arr = []
const sum = arr.reduce((pre, cur, index) => {
    console.log(pre, cur, index)
    return pre + cur
})
// Uncaught TypeError: Reduce of empty array with no initial value

提供了初始值就不會

const arr = []
const sum = arr.reduce((pre, cur, index) => {
    console.log(pre, cur, index)
    return pre + cur
}, 0)
console.log(arr, sum)  // []  0

3、reduce用法

1.求和、求積

const arr = [1, 2, 3, 4]
const sum = arr.reduce((pre, cur) => pre + cur);  // 求和   10
const mul = arr.reduce((pre, cur) => pre * cur);  // 求積     24

2.計(jì)算數(shù)組中元素出現(xiàn)個(gè)數(shù)

const arr = ["lin", "chen", "wei", "lin", "hui"]
const num = arr.reduce((pre, cur) => {
    if(cur in pre){
        pre[cur] ++
    }else{
        pre[cur] = 1
    }
    return pre
}, {})
console.log(num)  // {lin: 2, chen: 1, wei: 1,hui: 1}

3.數(shù)組去重

const arr = [1,1,2,3,4,5,6,6,6]
const newArr = arr.reduce((pre, cur) => {
    if(!pre.includes(cur)){
        pre.push(cur)
    }
     return pre
}, [])
console.log(newArr)  //  [1, 2, 3, 4, 5, 6]

4.多維數(shù)組轉(zhuǎn)一維

const arr = [[0, 1], [2, 3], [4, [5,6,7]]]
const newArr = function(arr){
return arr.reduce((pre,cur)=>{
    if(Array.isArray(cur)){
        pre = pre.concat(newArr(cur))
    }else{
        pre.push(cur)
    }
    return pre
},[])
}
console.log(newArr(arr));   //  [0, 1, 2, 3, 4, 5, 6, 7]
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容