数组的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)

几种常见用法

1、计算数组总数

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

2、合并二维数组

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

3、统计一个数组中有多少个不重复的单词

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

4、去重

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求重复的总和

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做也是非常简单，直接上代码

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函数