Reduce函数

1.Reduce函数

1.1 概述

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

let 结果 = 数组.reduct(累加器, 初始化值)
//累加器
(累加结果, 当前值, 当前索引)=>{

	return 处理结果
}

1.2 累加和

// reduce 案例1：累加和
let arr = [1,2,3,4,5]

let s = arr.reduce( (sum,current,index)=>{

    return sum + current
} , 0)


console.info(s)

1.3 对象数组的累加和

//案例2：对象数组的累加和
let arr = [
    {
        name: 'jack',
        count: 10
    },
    {
        name: 'rose',
        count: 20
    }
]
let s = arr.reduce((sum,current,index)=>{
    return sum + current.count
},0);


console.info(s)

1.3 对象数组分组求和

//案例3：
let arr = [
    {name: 'jack',course:'语文',count: 100},
    {name: 'jack',course:'英语',count: 100},
    {name: 'jack',course:'数学',count: 100},
    {name: 'rose',course:'语文',count: 50},
    {name: 'rose',course:'英语',count: 50},
    {name: 'rose',course:'数学',count: 50}
]
//reduce
let s2 = arr.reduce((obj,current,index)=>{
    
    let name = current.name
    let count = current.count

    // 获得obj对应名称值  {'jack':100} --》 100
    let oldCount = obj[name]
    // oldCount 如果是 undefined，表示此名称第一次出现
    if(oldCount){
        obj[name] = oldCount + count
    } else {
        //第一次赋值
        obj[name] = count
    }
    console.info(`之前累加值：${oldCount},当前值：${count}，最终结果：${JSON.stringify(obj)}`)

    return obj
} , {})


//结果：{'jack': 300, 'rose': 150}
/*没有数据：{}
    {'jack': 100}
    {'jack': 200}
    {'jack': 300}
    {'jack': 300,'rose':50}
    {'jack': 300,'rose':100}
    {'jack': 300,'rose':150}

*/
console.info(s2)

1.4 二维数组的处理

let arr = [
    ['红色','黑色','白色'],
    ['16G','32G'],
    ['移动版','联通版']
]

结果：
[ [ '红色', '16G', '移动版' ],
  [ '红色', '16G', '联通版' ],
  [ '红色', '32G', '移动版' ],
  [ '红色', '32G', '联通版' ],
  [ '黑色', '16G', '移动版' ],
  [ '黑色', '16G', '联通版' ],
  [ '黑色', '32G', '移动版' ],
  [ '黑色', '32G', '联通版' ],
  [ '白色', '16G', '移动版' ],
  [ '白色', '16G', '联通版' ],
  [ '白色', '32G', '移动版' ],
  [ '白色', '32G', '联通版' ] 
]

• 步骤一：第一组处理

//案例3：
let arr = [
    ['红色','黑色','白色'],
    ['16G','32G']
]
//reduce
let s = arr.reduce( (res,current,index)=>{
    //处理第一组
    if(index == 0){
        //遍历第一组
        current.forEach(item=>{
            res.push([item])
        })
    }
    return res
} ,[])

console.info(s)

• 步骤二：之后处理

let arr = [
    ['红色','黑色','白色'],
    ['16G','32G'],
    ['移动版','联通版']
]

//reduce
let s = arr.reduce( (res,current,index)=>{
    //处理第一组
    if(index == 0){
        //遍历第一组
        current.forEach(item=>{
            res.push([item])
        })
    } else {
        //其他行
        // res 获得第一行准备数组
        let newArr = []
        res.forEach(tempArr=>{
            // 当前行获得需要处理
            current.forEach(ele=>{
                // console.info([...tempArr , ele])
                newArr.push([...tempArr, ele ])
            })
        })
        res = newArr
    }
    return res
} ,[])

1.5 二维数组 处理结果为对象

let arr = [
    ['红色','黑色','白色'],
    ['16G','32G'],
    ['移动版','联通版']
]

结果：
[ {'attr0': '红色', 'attr1':'16G', 'attr2':'移动版' },
  {'attr0': '红色', 'attr1':'16G', 'attr2':'联通版' },
  {'attr0': '红色', 'attr1':'32G', 'attr2':'移动版' },
  {'attr0': '红色', 'attr1':'32G', 'attr2':'联通版' },
  {'attr0': '黑色', 'attr1':'16G', 'attr2':'移动版' },
  {'attr0': '黑色', 'attr1':'16G', 'attr2':'联通版' },
  {'attr0': '黑色', 'attr1':'32G', 'attr2':'移动版' },
  {'attr0': '黑色', 'attr1':'32G', 'attr2':'联通版' },
  {'attr0': '白色', 'attr1':'16G', 'attr2':'移动版' },
  {'attr0': '白色', 'attr1':'16G', 'attr2':'联通版' },
  {'attr0': '白色', 'attr1':'32G', 'attr2':'移动版' },
  {'attr0': '白色', 'attr1':'32G', 'attr2':'联通版' } 
]

let arr = [
    ['红色','黑色','白色'],
    ['16G','32G'],
    ['移动版','联通版']
]
//reduce
let s = arr.reduce( (res,current,index)=>{
    //第一个数组
    if(index == 0) {
        current.forEach(ele=>{
            res.push({['attr' + index] : ele })
        })
    } else {
        //其他数组
        let newArr=[]
        res.forEach(obj=>{
            current.forEach(ele=>{
                // console.info({ ...obj, ['attr'+index] : ele})
                newArr.push({ ...obj, ['attr' +index] : ele})
            })
        })
        res = newArr
    }
    return res
} , [])
console.info(s)