理解JS中的reduce方法

reduce方法

reduce 方法对数组的每个元素执行提供的reducer函数，将结果汇为单个返回值。

arr.reduce(callback(accumulator, currentValue, index, array), initialValue)

• callback 执行数组中每个值的函数，包括四个参数。

1. accumulator回调callback方法执行后的返回值
2. currentValue数组中正在处理的当前值
3. index数组中正在处理的当前值的索引
4. array调用reduce方法的数组

• initialValue设置的初始值（可选）

注意：若提供了初始值 initialValue，将作为第一次调用callback函数时的第一个参数 accumulator 的值，索引 index从0开始，迭代次数为 arr.length；若没有提供初始值initialValue，则把数组第一个值作为callback第一个参数的值，索引 index从1开始，迭代次数为 arr.length - 1

使用场景

• 数组累加

let sum = [1, 2, 3, 5].reduce((acc, cur) => {
 return acc + cur
})

• 对象属性和

let sum = [{x: 1}, {x: 3}, {x: 5}, {x: 6}].reduce((acc, current) => {
  return acc + current.x
}, 0)

• Promise 队列

let promiseFn = function () {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log('resolve1')
        resolve()
      }, 1000)
    })
  }
  let promiseFn2 = function () {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log('resolve2')
        resolve()
      }, 1000)
    })
  }
  let promiseFn3 = function () {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log('resolve3')
        resolve('last resolve')
      }, 1000)
    })
  }
  let pro = [promiseFn, promiseFn2, promiseFn3].reduce((p, f) => {
    return p.then(f)
  }, Promise.resolve()) // 提供initialValue，从第一个参数遍历
  pro.then(res => {
    console.log('res', res)
  })

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

let names = ['alice', 'Bob', 'lee', 'mark']
let nameNum = names.reduce((acc, cur) => {
    if (!acc[cur]) {
        acc[cur] = 0
    } else {
        acc[cur]++
    }
    return acc
}, {})

• 数组去重

let arr = ['1', '2', '2', '3', '4'].reduce((acc, cur) => {
  if (!acc.includes[cur]) {
    return acc.concat(cur)
  }
  return acc
}, [])
// 当然还可以使用new set 
// Array.from 从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。
Array.from(new Set(myArray))

• 二维数组转行成一维数组

let arr = [['1', '2'], ['3', '4']].reduce((acc, cur) => {
  return acc.concat(cur)
}, [])