前言

过去有很长一段时间，我一直很难理解reduce()这个方法的具体用法，因为平时也不怎么用的到。事实上如果你深入了解这个方法，其实在很多地方我们都可以用得到，下面我们就来进一步的去了解一下这个方法。

什么是reduce

reduce是es6新增的一个操作数组的方法。

reduce方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce方法有两个参数，第一个参数是一个callback，用于针对数组项的操作；第二个参数则是传入的初始值，这个初始值用于单个数组项的操作。

arr.reduce(callback,[initialValue])

callback （执行数组中每个值的函数，包含四个参数）

    1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
    2、currentValue （数组中当前被处理的元素）
    3、index （当前元素在数组中的索引）
    4、array （调用 reduce 的数组）

initialValue （作为第一次调用 callback 的第一个参数。）

了解reduce参数之后，我们一起来看看该函数的具体用法

实例

数组求和、求积

let arr1 = [1,2,3,4,5] 
//求和 
let sum=arr1.reduce((pre,cur)=> pre + cur ,0 )
//累加初始值0可以不给 不影响效果 
console.log('sum=',sum); //15 
//求积 
let mul = arr1.reduce((pre,cur) => pre * cur ) 
console.log('mul=',mul) //120

也可以通过reduce来拼接字符串

let names = ['小白','小红','小黑']
let reduceName = names.reduce((pre,cur)=>`${per}、${current}`)

计算数组中每个元素出现的次数

let names = ['Jan', 'Ella', 'Sam', 'Ron', 'Jan']; 
let nameNum = names.reduce((pre,cur)=>{ 
    if(cur in pre){ 
        pre[cur]++ 
    }else{ 
        pre[cur] = 1 
    } 
    return pre
   },{}) 
   console.log(nameNum); //{Jan: 2, Ella: 1, Sam: 1, Ron: 1}

将二维数组转换为一维数组

reduce结合concat方法使用

let cat = [[1,2],[2,3],[3,4],[4,5]]
let newCat = cat.reduce((pre,cur)=>{
    return pre.concat(cur)
},[])
console.log(newCat) //[1,2,2,3,3,4,4,5]

数组去重

reduce结合includes方法使用

let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])
console.log(newArr); *//* [*1, 2, 3, 4*]

按属性分类

const people = [
{ name: 'Alice', age: 21 },
{ name: 'Max', age: 20 },
{ name: 'Jane', age: 20 }]

const formatPeople = people.reduce((pre, obj) => {
    const key = obj[age]
    if (!pre[key]) {
        pre[key] = []
    }
    pre[key].push(obj)
    return pre
}, {})
    
console.log(formatPeople)
// {
// 20: [
// { name: 'Max', age: 20 },
// { name: 'Jane', age: 20 }
// ],
// 21: [{ name: 'Alice', age: 21 }]
// }

reduceRight

该方法用法与reduce()其实是相同的，只是遍历的顺序相反，它是从数组的最后一项开始，向前遍历到第一项。

总结

reduce是数组的归并方法，与forEach、map、filter等迭代方法一样都会对数组每一项进行遍历，但是reduce可同时将前面数组项遍历产生的结果与当前遍历项进行运算，这一点是其他迭代方法无法企及的，reduce的使用场景还很多，当你遇到复杂数组操作的时候，使用reduce可能会让你更加方便的处理该场景。熟练掌握能减少你的代码量，使代码变的更简洁，提高开发效率。

感谢你阅读本篇文章，希望本篇文章对你有所帮助！

你所不知道的reduce方法

前言