值得了解的25个数组reduce高级用法

reduce作为ES5新增的常规数组方法之一，是一个强大的方法。本篇文章给大家介绍一下25个数组reduce高级用法。

reduce作为ES5新增的常规数组方法之一，对比forEach、filter和map，在实际使用上好像有些被忽略，发现身边的人极少使用它，导致这个如此强大的方法被逐渐埋没。

如果经常使用reduce，怎么可能放过如此好用的它呢！我还是得把他从尘土中取出来擦干净，奉上它的高级用法给大家。一个如此好用的方法不应该被大众埋没。

下面对reduce的语法进行简单说明，详情可查看MDN的reduce()的相关说明。

• 定义：对数组中的每个元素执行一个自定义的累计器，将其结果汇总为单个返回值
• 形式：array.reduce((t, v, i, a) => {}, initValue)
• 参数
  • callback：回调函数(必选)
  • initValue：初始值(可选)
• 回调函数的参数
  • total(t)：累计器完成计算的返回值(必选)
  • value(v)：当前元素(必选)
  • index(i)：当前元素的索引(可选)
  • array(a)：当前元素所属的数组对象(可选)
• 过程
  • 以t作为累计结果的初始值，不设置t则以数组第一个元素为初始值
  • 开始遍历，使用累计器处理v，将v的映射结果累计到t上，结束此次循环，返回t
  • 进入下一次循环，重复上述操作，直至数组最后一个元素
  • 结束遍历，返回最终的t

reduce的精华所在是将累计器逐个作用于数组成员上，把上一次输出的值作为下一次输入的值。下面举个简单的栗子，看看reduce的计算结果。

const arr = [3, 5, 1, 4, 2]; const a = arr.reduce((t, v) => t + v); // 等同于 const b = arr.reduce((t, v) => t + v, 0);

reduce实质上是一个累计器函数，通过用户自定义的累计器对数组成员进行自定义累计，得出一个由累计器生成的值。另外reduce还有一个胞弟reduceRight，两个方法的功能其实是一样的，只不过reduce是升序执行，reduceRight是降序执行。

对空数组调用reduce()和reduceRight()是不会执行其回调函数的，可认为reduce()对空数组无效

高级用法

单凭以上一个简单栗子不足以说明reduce是个什么。为了展示reduce的魅力，我为大家提供25种场景来应用reduce的高级用法。有部分高级用法可能需要结合其他方法来实现，这样为reduce的多元化提供了