天天看点

ES5数组的reduce方法

一、reduce方法接收2个参数

  参数1:function(accumulator, currentValue, index, arr) {},必须

    accumulator:必须,初始值(initialValue)或计算后的返回值(上次调用函数的返回值)

    currentValue:必须,当前元素

    index:可选,当前元素的索引

    arr:可选,当前元素所属的数组

  参数2:initialValue,可选,传递给函数的初始值

二、使用场景

  1、数组求和

const arr = [1, 2, 3]
    const total = arr.reduce((acc, cur) => acc + cur)
    const total1 = arr.reduce((acc, cur) => acc + cur, 10)
    console.log(total) // 6
    console.log(total1) // 16      

    一般来说,传了初始值会更安全

const arr = []
    const total = arr.reduce((acc, cur) => acc + cur, 0) // 不传初始值会报错:Reduce of empty array with no initial value
    console.log(total) // 0      

    数组对象中的属性求和

const arr = [{ x: 1 }, { x: 2 }, { x: 3 }]
    const total = arr.reduce((acc, cur) => acc + cur.x, 0)
    console.log(total) // 6      

    initialValue为0,必传。这里可以先通过map拿到所有的x,再求和,但是这样就多循环了几次

  2、二维数组转一维数组

const arr = [[1, 2], [3, 4], [5, 6]]
    const newArr = arr.reduce((acc, cur) => acc.concat(cur), [])
    console.log(newArr) // [1, 2, 3, 4, 5, 6]      

    多维数组转扁平化

const arr = [
      [1, 2],
      [3, 4],
      [5, [6, 7, [8]]]
    ]
    const flatten = arr => arr.reduce((acc, cur) => acc.concat(Array.isArray(cur) ? flatten(cur) : cur),[])
    const newArr = flatten(arr)
    console.log(newArr) // [1, 2, 3, 4, 5, 6, 7, 8]      

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

const arr = ['one', 'two', 'three', 'two', 'three', 'three']
    const count = arr.reduce((acc, cur) => {
      if (cur in acc) {
        acc[cur]++
      } else {
        acc[cur] = 1
      }
      return acc
    }, {})
    console.log(count) // {one: 1, two: 2, three: 3}      

  4、去重

const arr = [1, 2, 3, 4, 3, 2, 1]
    const newArr = arr.reduce((acc, cur) => {
      !acc.includes(cur) && acc.push(cur)
      return acc
    }, [])
    console.log(newArr) // [1, 2, 3, 4]      

  5、按属性对object进行分类

const people = [
      { name: 'Alice', age: 21 },
      { name: 'Max', age: 20 },
      { name: 'Jane', age: 20 }
    ]
    function groupBy(arr, property) {
      return arr.reduce((acc, cur) => {
        const key = cur[property]
        !acc[key] && (acc[key] = [])
        acc[key].push(cur)
        return acc
      }, {})
    }
    const res = groupBy(people, 'age')
    console.log(res) // {20: Array(2), 21: Array(1)}