數組的reduce用法

定義

reduce() 方法接收一個函數做爲累加器,數組中的每一個值(從左到右)開始縮減,最終計算爲一個值。對空數組是不會執行回調函數的。

語法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

參數

圖片描述

var arr = [2,4,6,7,3];
// 前面兩個是必須, 0表示傳遞給函數的初始值
arr.reduce((total, currentValue, currentIndex, arr) => {
         // 這裏total指初始值, 或者計算結束後的返回值,
          console.log(total);              // 0
          console.log(currentValue);       // 2
          console.log(currentIndex);       // 0
          console.log(arr);                // [2,4,6,7,3]
}, 0)

幾種常見用法

一、計算數組總數面試

var res = arr.reduce((total,num) => {
        return total + num;
    })
    console.log(res)   // 22

二、合併二維數組數組

var red = [[0,1],[2,3],[4,5]].reduce((a,b) => {
            return a.concat(b)
    },[])
    console.log(red)   // [0, 1, 2, 3, 4, 5]

三、統計一個數組中有多少個不重複的單詞app

function getWordCnt1() {
     return reg.reduce((prev, next) => {
           prev[next] = (prev[next] + 1) || 1;
           return prev;
    }, {})
}
console.log(getWordCnt1())    // {apple: 2, orange: 3, pear: 1}

四、去重函數

var reh = [2,4,5,3,2,4,1]
function distinct(reh) {
     return reh.reduce((prev, cur) => {
           return prev.indexOf(cur) != -1? prev : [...prev, cur]
     },[])
}
console.log(distinct(reh))   // [2,4,5,3,1]

擴展

前幾天刷脈脈,看到一個面試題,要求把數組裏name相等的去重,而且menu求重複的總和spa

var arr = [
       {name: 'a', menu: 2},
       {name: 'a', menu: 21},
       {name: 'g', menu: 2},
       {name: 'g', menu: 3},
       {name: 'g', menu: 3},
       {name: 'c', menu: 4},
       {name: 'c', menu: 44},
]

若是用reduce作也是很是簡單,直接上代碼code

let reg= Object.entries(arr.reduce((result,obj) => {
            result[obj.name] = (result[obj.name] + obj.menu) || obj.menu
            return result;
        }, {})).map(obj => {
            return {
                name: obj[0],
                menu: obj[1]
    }    
})
console.log(reg)   // [{name: "a", menu: 23}, {name: "g", menu: 8}, {name: "c", menu: 48}]

總結

reduce(callback,initiaValue)會傳入兩個變量,回調函數(callback)和初始值(initiaValue) 若是沒有傳入初始值,則 reduce 方法會對從第二個元素開始的每一個元素調用callback函數 若是提供了初始值(initiaValue),則 reduce 方法會對數組中的每一個元素調用一次callback函數
相關文章
相關標籤/搜索