reduce方法详解

1.reduce可以传入两个参数

arr.reduce((prev,cur,index,currenArr)=>{

},init)

参数详解：

1. 第一个参数是一个回调函数
   • prev:表示上一次调用回调时的返回值，或者初始值init
   • cur:表示当前正在处理的数组元素
   • index:表示正在处理的数组元素的索引，若提供init值，则索引为0，否则索引为1
   • currenArr: 表示原数组
2. 第二个参数
   • init: 表示初始值

// 没有初始值
let arr = [1,2,3,4]
arr.reduce((prev,cur,index,currenArr)=>{
    console.log(prev) 
    console.log(cur)
    console.log(index) 
    console.log(currenArr)
    return prev+1
})
//结果
// 1
// 2
// 1
// [ 1, 2, 3, 4 ]
// 2
// 3
// 2
// [ 1, 2, 3, 4 ]
// 3
// 4
// 3
// [ 1, 2, 3, 4 ]

/**-------------------------------------------------------------------------**/

// 有初始值
let arr = [1,2,3,4]
arr.reduce((prev,cur,index,currenArr)=>{
    console.log(prev) 
    console.log(cur)
    console.log(index) 
    console.log(currenArr)
    return prev+1
},1)
//结果
// 1
// 1
// 0
// [ 1, 2, 3, 4 ]
// 2
// 2
// 1
// [ 1, 2, 3, 4 ]
// 3
// 3
// 1
// [ 1, 2, 3, 4 ]
// 4
// 4
// 3
// [ 1, 2, 3, 4 ]

是不是很疑惑？没有初始值的时候为什么只是打印了三次，原数组不是有四个值吗？，而且没有初始值的时候第一次的prev和cur竟然都是1。

• 解释：
  • 首先pre表示的是上一次回调时的返回值，或者是初始值init。
  • 在第一次调用的时候，第一个案例是没有设置init的值，在没有设置init值的情况下，index的索引值是从1开始，其实是第一次就隐式调用了pre+cur，你可以理解为是在背后做了pre是0+cur。所以我们在控制台看到的就是整个计算过程是index是1-3，共3次。
  • 在第二个案例中，init设置的值是1，那么就是代表pre的初始值就是1，那么第一次的时候，index是从0开始的,第一次调用返回的就是1+1=2,整个过程index执行是从0-3，共4次

2.reduce的案例

1.求和

let arr=[1,2,3,4];

let reslut=arr.reduce((prev,cur)=>{
    return prev+cur
})
console.log(reslut) // 10

2.重复次数统计

let data=[
    {name:'zs',id:'1'},
    {name:'zs',id:'1'},
    {name:'ws',id:'2'},
    {name:'ls',id:'3'},
    {name:'cd',id:'4'},
    {name:'ws',id:'2'},
]

let reslut=data.reduce((prev,cur)=>{
    [cur.name] in prev ? ++prev[cur.name] : prev[cur.name]=1
    return prev
   
},{})
console.log(reslut) // { zs: 2, ws: 2, ls: 1, cd: 1 }

3.计算总和

//计算总和
let data=[
    {
        name:'洋葱',
        money:12
    },
    {
        name:'土豆',
        money:10 
    }
]
let result=data.reduce((prev,cur)=>{
    return prev+cur.money
},0)
console.log(result) //22

4.数组去重

let arr=[1, 2, 3, 4, 5, 3, 2, 1, 6, 4, 7, 8];
let result=arr.reduce((prev,cur)=>{
   if(!prev.includes(cur)){
       prev.push(cur)
   }
   return prev
},[])
console.log(result) //[ 1, 2, 3, 4, 5, 6, 7, 8 ]

5.数组扁平化

let arr=[1,2,[3,4,[5,6]]];
let reslut=(arr)=>{
    return arr.reduce((prev,cur)=>{
       return  prev.concat(Array.isArray(cur) ? reslut(cur):cur);
    },[])
}

console.log(reslut(arr)) //[ 1, 2, 3, 4, 5, 6 ]

6.合并函数 组合函数

function str(str1,str2){
   return str1+str2
}

function strLen(str){
    return str.length
}

function strLimit(str){
    return `$ ${str}`
}
//优化前
let compose=strLimit(strLen(str('123','345')))
console.log(compose) //$ 6
//优化后
let compose=composeFn(str,strLen,strLimit)('123','345')
function composeFn(...fn){
    return function(...args){ 
        let shiftFn=fn.shift();
        return fn.reduce((prev,cur)=>{
            return cur(prev)
        },shiftFn(...args))
    }
}
console.log(compose) //$ 6