JS中数组的reduce方法使用总结

不知道大家有没有这种情况，每次要使用reduce方法时，总会想不起来这个方法该如何使用，都得先搜索一波reduce方法各个参数的含义与适用场景。

接下来从reduce方法的语法讲起，结合实例，帮助掌握reduce方法的使用。

一、语法：数组中的每个元素执行该回调函数，最终返回一个结果值。

const arrMy = [1, 2, 3]

arrMy.reduce(function(total, currentVal, currentIndex, arr){

// todo 每个函数元素要执行的

}, initVal)

reduce方法的第一个参数：回调函数，必需，数组元素会执行该函数

total：必需，初始值或者是计算返回后的结束值；

currentVal：必需，当前数组元素值；

currentIndex：可选，当前数组元素的下标；

arr：可选，当前元素所属的数组对象。

reduce方法的第二个参数：initVal，可选，传递给回调参数的初始值

例1：

const arrMy = [1, 2]
const res = arrMy.reduce(function(total, currentVal, currentIndex, arr){
  console.log(total, currentVal, currentIndex, arr)
  return total + currentVal
}, 0)
console.log(res)

结果如下图：

  

例2：

const arrMy = [1, 2]
const res = arrMy.reduce(function(total, currentVal, currentIndex, arr){
  console.log(total, currentVal, currentIndex, arr)
  return total + currentVal
})
console.log(res)

结果如下图：

由此，可以看出，回调函数第一次执行时，有以下两种情况：

1. 无初始值initVal时，total的值就是数组的第一个值，currentVal就是数组的第二个值；索引直接从1开始，跳过了0。
2. 有初始值initVal时，totao的值就是initVal，currentVal就是数组的第一个值；索引从0开始。

因此，下面这3点需要注意：

1. 无初始值initVal时，数组arrMy为空数组时，将会报错！
2. 数组arrMy只有一个元素时，不会执行回调函数，reduce方法直接返回该数组的唯一一个元素。
3. 有初始值，数组arrMy为空数组，不会执行回调函数，reduce方法直接返回该初始值。

二、使用场景举例

使用场景1：数组求和，参考例1

使用场景2：数组去重

const arr = [1, 3, 3, 4, 5, 5]
const res = arr.reduce((total, currentVal) => {
  if (total.indexOf(currentVal) === -1) {
    total.push(currentVal)
  }
  return total
}, [])
console.log(res) // [ 1, 3, 4, 5 ]
console.log(arr) // [1, 3, 3, 4, 5, 5]

使用场景3：数组降维

const arr = [[1], [2, 3, [4,5]]]
const resFun = (item) => {
  return item.reduce((total, currentVal) => {
    if (Array.isArray(currentVal)) {
      total = total.concat(resFun(currentVal))
    } else {
      total.push(currentVal)
    }
    return total
  }, [])
}
console.log(resFun(arr)) // [ 1, 2, 3, 4, 5 ]
console.log(arr) // [ [ 1 ], [ 2, 3, [ 4, 5 ] ] ]

❤️欢迎素质三连[点赞 + 收藏 + 评论]

我是小梅，有兴趣的话可以在微信搜一搜「小梅的前端之路」第一时间接收文章更新通知，一起沟通、学习成长呀。