javascript数组中reduce的用法和使用场景

reduce是数组原型上面的一个方法，它的功能非常的强大，但是实际中似乎很少用到，来看一下这个函数的官方概述：reduce()方法接收一个函数作为累加器（accumulator），数组中每个值(从左到右)开始缩减，最终为一个值，可以知道reduce作为一个高阶函数，接收的就是一个回调函数，去调用数组里面的每一项，直到数组结束

reduce的参数

reduce可以接收两个参数，第一个参数为函数，函数一共有四个参数

1. 第一个prev：上一次的值，也就是计算操作后的值
2. 第二个curr：数组当前的值，每执行一次，下标值加1
3. 第三个index： 数组当前值的索引
4. 第四个arr：原数组

const arr = [1,2,3,4,5]
arr.reduce((prev, curr, index, arr) => {
  return prev + curr
})  // 累加器15

如上示例，reduce只接受了一个回调函数参数，初次开始执行时prev为数组第一项1，curr为数组的第二项2（index=1），第二次执行时prev为3，curr为数组的第三项3，第三次执行时prev为6，curr为数组第四项4，第三次执行prev为10，curr为数组第5项5，最后返回10+5=15, 如果reduce没有传递第二个参数，reduce执行的次数为arr.length -1

reduce的第二个参数为prev的默认值，如果设置之后prev为传递的值，curr默认从数组的第一项开始计算

const arr = [1,2,3,4,5] arr.reduce((prev, curr, index, arr) => { return prev + curr }，0) // 累加器15

执行的过程与只传递一个参数类似，只是执行的次数为arr.length, index从0开始算起

reduce的使用场景

1. 累加器

计算对象中属性的和值, 此时的场景需要设置第二个参数为初始计算值

const arr = [
 {
   total: 4
 },
 {
   total: 5
 },
 {
  total: 8
 }
]
const total = arr.reduce((prev, curr) => {
  return prev + curr.total
}, 0) // 17

2. 数组去重

数组去重有很多种方法，其实reduce也可以用来去重

const arr = [1,2,4,4,5,5,6]
const newArr = arr.reduce((prev, curr) => {
  if (!prev.includes(curr)) { // includes为es7中新增的方法，判断数组中是否包含某个值
    prev.push(curr)
  }
  return prev
}, [])

3. 数组扁平化

用reduce将二维数组转化为一维数组, 每次遍历执行时返回新的数组，指向prev（上一次执行或计算的值）

const arr = [1,[2,3],4,[5,6]]
const newArr = arr.reduce((prev, curr) => {
  return prev.concat(Array.isArray(curr) ? curr : [curr])
},[])

4. 计算数组中元素出现的次数

const arr = ['tom', 'mary', 'slice', 'tom', 'mary']
const item = arr.reduce((prev, curr) => {
  if (curr in prev) {
    prev[curr]++
  } else {
    prev[curr] = 1
  }
  return prev
}, {})
// {mary: 2, slice: 1, tom: 2}

reduce相关方法: reduceRight，其与reduce参数和用法完全类似，只是计算时的顺序不一样，reduce是从左往右计算，而reduceRight是从右往左计算