reduce作为ES5新增的常规数组方法之一,是一个强大的方法。本篇文章给大家介绍一下25个数组reduce高级用法。
reduce
作为ES5新增的常规数组方法之一,对比forEach
、filter
和map
,在实际使用上好像有些被忽略,发现身边的人极少使用它,导致这个如此强大的方法被逐渐埋没。
如果经常使用reduce
,怎么可能放过如此好用的它呢!我还是得把他从尘土中取出来擦干净,奉上它的高级用法给大家。一个如此好用的方法不应该被大众埋没。
下面对reduce
的语法进行简单说明,详情可查看MDN
的reduce()的相关说明。
- 定义:对数组中的每个元素执行一个自定义的累计器,将其结果汇总为单个返回值
- 形式:
array.reduce((t, v, i, a) => {}, initValue)
- 参数
- callback:回调函数(
必选
) - initValue:初始值(
可选
)
- callback:回调函数(
- 回调函数的参数
- total(
t
):累计器完成计算的返回值(必选
) - value(
v
):当前元素(必选
) - index(
i
):当前元素的索引(可选
) - array(
a
):当前元素所属的数组对象(可选
)
- total(
- 过程
- 以
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
的多元化提供了