数组的reduce方法

1.定义
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

语法这个方法可以接收两个参数：

要执行的函数，要执行的函数中也可以传入参数，如下

prev：上次调用函数的返回值

cur：当前元素

index：当前元素索引

arr：被遍历的数组

函数迭代的初始值

array.reduce(function(prev, currentValue, currentIndex, arr), initValue)

2.应用
不传入函数迭代的初始值

const arr = [11, 22, 33, 44]
const sum = arr.reduce((prev, cur, index) => {
   console.log(prev, cur, index);
   return prev + cur
})
console.log('sum:', sum);

控制台打印

 

打印结果可以看到， reduce 就是对 arr 从左到右进行累加求和， 如果没有传入函数迭代的初始值， 初始值默认是数组第一位 ， prev 就是计算结束后的返回值。

传入函数迭代的初始值

const arr = [11, 22, 33, 44]
const sum = arr.reduce((prev, cur, index) => {
   console.log(prev, cur, index);
   return prev + cur
}, 10)
console.log('sum:', sum);

控制台打印

 

打印结果可以看到，我们传入函数迭代的初始值之后，也就是让 prev 从10开始累加，然后接着迭代累加 prev 。

除了平时我们可以用它去求一个数组的和，又或者是乘积，我们还可以拿他去做很多很多的事情，比如 计算数组中每个元素出现的次数，数组去重，扁平数组等等。

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

const arr = ['张三', '李四', '张三', '王五', '赵六', '王五', '张三']
const obj = arr.reduce((prev, cur) => {
  console.log(prev, cur);
  if (cur in prev) {
    prev[cur] += 1
  } else {
    prev[cur] = 1
  }
  return prev
}, {})
console.log(obj);

控制台打印

数组去重

const arr = ['张三', '李四', '张三', '王五', '赵六', '王五', '张三']
const newArr = arr.reduce((prev, cur) => {
   console.log(prev, cur);
   if (!prev.includes(cur)) {
     prev.push(cur)
   }
   return prev
 }, [])
 console.log(newArr);

控制台打印

 

 

扁平化数组

const arr = [
 {
    label: '水果',
    children: [
      {
        label: '香蕉'
      },
      {
        label: '橘子'
      }
    ]
  },
  {
    label: '蔬菜',
    children: [
      {
        label: '西红柿'
      },
      {
        label: '白菜'
      }
    ]
  },
  {
    label: '小猫'
  },
  {
    label: '小狗'
  }
]
const func = (res) => res.reduce((prev, cur) => {
  console.log(prev, cur)
  return prev.concat(Array.isArray(cur.children) ? func(cur.children) : cur)
}, [])
console.log(func(arr))

控制台打印

 

————————————————
版权声明：本文为CSDN博主「键盘敲烂  月薪过万」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_47267851/article/details/125993449