JavaScript的数组中reduce的9种用法

语法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
total 必需。初始值, 或者计算结束后的返回值。
currentValue 必需。当前元素
currentIndex 可选。当前元素的索引
arr 可选。当前元素所属的数组对象。
initialValue 可选。传递给函数的初始值

1、普通数组累加求和

let arr = [1,2,3,4,5];
//每次返回total+current的值 给total。
// 0 为初始值   ,如果初始值为1 的话  最后结果必为(1+2+3+4+5)=15  再 + 1 = 16
let sum = arr.reduce(function(total,current){
    return total+current
},0)
//箭头函数写法：
// let sum = arr.reduce((total,current)=> total+current,0)
console.log(sum);

2、数组对象求和

let arr = [{x:1},{x:2},{x:3}]
//total+current.x ： 使用 arr 数组的 属性x 的值 进行累加。total 初始值为0
let sum = arr.reduce(function(total,current){
    return total+current.x
},0)
//箭头函数：
// let sum = arr.reduce((total,current)=> total+current.x,0)
console.log(sum);

3、将二维数组转化为一维数组

let arr = [[0,1],[2,3],[4,5]]
//初始值是空数组:[]， 用数组拼接 返回拼接后的新数组
let arr1 = arr.reduce(function(newarr,current){
    return newarr.concat(current)
},[])
//箭头函数：
// let arr1 = arr.reduce((newarr,current)=> newarr.concat(current),[])
console.log(arr1);

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

let arr = ['filter','reduce','map','foreach','reduce']
//obj 初始值为对象，如果遍历的元素在该对象中， 它的值就+1
//如果不在  就是第一次出现  它的值为1
let count = arr.reduce(function(obj,current){
    //将current当做对象的键名  key：value  的key 
    if(current in obj){
        obj[current]++;
    }else{
        obj[current]=1;
    }
    return obj;
},{})
console.log(count);

5、按属性对Object分类

let arr = [
    {name:'zs',age:18},
    {name:'ls',age:19},
    {name:'zw',age:18}
]
let t = 'age'
let res = arr.reduce(function(accobj,obj){
    //每次循环拿到的{name:'zs',age:18}  只需用到 age的值来分类，作为accobj 的键名
    var key = obj[t];// 当前age作为键名
    //先给accobj的键名为key 赋value值 ，用数组存value，首为空数组，只有它是数组才能用push
    if(!accobj[key]){
        accobj[key] = []  
    } 
    // 用数组存这个value    push方法加入
    accobj[key].push(obj);
    return accobj
},{})
console.log(res);

6、使用扩展运算符和初始值 绑定包含在对象数组中的数组

let user = [
    {name:'zs',books:['The tiny times','The ordinary world'],age:18},
    {name:'ls',books:['Dumb house','War ahd peace'],age:19},
    {name:'ww',books:['Conan','Border town'],age:20}
]
//初始为数组['default']  之后将current.books也就是数组   复制到数组pre中
let allboooks = user.reduce(function(pre,current){
    //...current.books :把数组展开，跟pre合并
    return [...pre,...current.books]
},['default'])
console.log(allboooks);

7、数组去重

let arr = [1,2,1,2,3,4,7,6,3,1];
let res = arr.sort().reduce((init,current)=>{
    //初始默认为空数组
    //还没有添加 或者 已经有值了 且上一个传入即数组init最后一个不等于当前，就加入
    //因为sort已经排好序了  重复的会挨在一起， 重复时就不把它push
    if(init.length===0||init[init.length-1]!==current){
        init.push(current)
    }
    return init
},[])
console.log(res);

8、按顺序运行Promise

//函数组成数组
const arrPro = [pro1,pro2,fun,pro4]
run(arrPro,10).then(console.log)//返回的promise对象成功态resolve(360) then打印

function run(arr,input){
    return arr.reduce(
        //[pro1,pro2,fun,pro4]  循环的第一个currentfun 是函数pro1，也就是第一次：
    //Promise.resolve(10).then(pro1)  :把10 传到pro1中，返回promise对象，把10*1.5=15 resolve
    //第二次：Promise.resolve(15).then(pro2)  :把15传到 pro2 ，返回promise对象。 15*2 = 30 
    //第三次：Promise.resolve(30).then(fun) 把30 传到fun ，30*3=90，被wrapped成promise返回
    //第四次：Promise.resolve(90).then(pro4)把90 传到pro4,90*4=360，返回promise对象
        (prom,currentfun)=> prom.then(currentfun),
        //初始值是promise对象  成功态
        Promise.resolve(input)
    );
}
function pro1(a){
    return new Promise((resolve,reject)=>{
        resolve(a*1.5)
    })
}
function pro2(a){
    return new Promise((resolve,reject)=>{
        resolve(a*2)
    })
}
function fun(a){
    return a*3;
}
function pro4(a){
    return new Promise((resolve,reject)=>{
        resolve(a*4)
    })
}

9、使用函数组合实现管道

//箭头函数
// const double = x => x + x
// const triple = x => 3 * x
//...functions 收集传入的两个函数为数组functions
// const pipe = (...functions) => input=> functions.reduce(
//     (acc, fn) => fn(acc),
//     input
// )
const double =function(x){
    return x+x
}
const triple = function(x){
    return 3*x
}
const pipe  = function(...functions){
    //返回函数   
    return function(input){// 调用函数时 传入 input=6 作为初始值
        return functions.reduce(
            //functions数组 有两个元素 函数 ，第一次循环时 为函数double 
            //fn(acc) ： double(6)   调用 函数 返回 6*2=12
            //第二次循环  fn(acc) : triple(12)  调用函数  返回12*3=36
            //将36 返回 输出
            (acc, fn) => fn(acc),
            input
        )
    }
}
//                     （函数，函数）
const multiply6 = pipe(double, triple) //返回结果是函数  
//相当于multiply6 为函数 :
// function multiply6 (input){
//     return 数组.reduce(
//         (acc, fn) => fn(acc),
//         input
//     )
// }

// Usage
let sum = multiply6(6) //调用 multiply6  函数
//即相当于let sum = triple( double(6) );
console.log(sum);//36

详情参考MDN之reduce