记录reduce的实际开发应用-一一网

参考: reduce

  reduce 4个参数
  previousValue 初始值（或者上一次回调函数的返回值）
  currentValue 数组中当前被处理的值
  index （当前元素在数组中的索引）
  array （调用 reduce 的数组）
复制代码

previousValue这个的理解很重要,表示的是上一次的结果,如果没有传入初始值,第一次打印就是数组第一个,如果传入了初始值,第一次打印就是初始值

1.数据分类

    const arr = [
      {
        gender: '男',
        age: 11,
      },
      {
        gender: '男',
        age: 12,
      },
      {
        gender: '女',
        age: 13,
      },
      {
        gender: '女',
        age: 14,
      },
      {
        gender: '无',
        age: 14,
      },
    ]
    const res = arr.reduce((obj, item) => {obj[item.gender] ? obj[item.gender].push(item) : 
    (obj[item.gender] = [item]);return obj}, {})
    console.log(res);
复制代码

2.求和

    const arr = [11, 12, 13, 14, 15]
    const res = arr.reduce((previousValue, currentValue, index) => {
      return previousValue + currentValue
    }, 8)
    console.log(res, 'res') // 73 "res"
复制代码

比较重要的一点就是,如果没有设置初始值,第一个previousValue是11,如果设置了就是8

3.属性求和

   const arr = [
      {
        age: 18,
      },
      {
        age: 20,
      },
      {
        age: 30,
      },
    ]

    const res = arr.reduce((pre, cur) => {
      return pre + cur.age
    }, 0)

    console.log(res) // 68
复制代码

这个案例挺常用的,如果这里不传入0的话,那么第一个pre是 {age: 18 }, 字符串加上number类型的, +号进行强制转换,肯定是NAN,所以一定要记得传入一个0的初始值哦~

4.二维数组变成一维数组

    const arr = [[11, 22], [33, 44]]
    const res = arr.reduce((pre, cur) => {
      return pre.concat(cur)
    }, [])
    console.log(res); //  [11, 22, 33, 44]
复制代码

5.多维数组变成1维

    const arr = [[1, 2, [3]]]
    const arrayPlatform = function (arr) {
      return arr.reduce((pre, cur) => {
        return pre.concat(Array.isArray(cur)?arrayPlatform(cur):cur)
      }, [])
    }
    console.log(arrayPlatform(arr), 7878) // [1, 2, 3]
复制代码