重学 Rxjs —— 数学和聚合操作符

272 阅读2分钟

「这是我参与2022首次更文挑战的第32天,活动详情查看:2022首次更文挑战

这一节是操作符系列最后一篇,这一篇看一下数学和聚合相关的操作符,这一部分内容比较少,这部分操作符主要用于数学计算或统计。

max

max 是获取流中的最大值,因为需要知道全部数据里面那个内容最大,因此这里需要作用于有限流,当流中全部数据都结束时我们可以拿到一个最大值。对于数字类型我们可以直接判断大小,对于对象类型我们需要为其传入一个比较器函数,定义大小比较的规则,根据规则比较出最大值。这里以对象类型的数据为例看一下用法:

of(
  {age: 7, name: 'Foo'},
  {age: 5, name: 'Bar'},
  {age: 9, name: 'Beer'},
).pipe(
  max((a, b) => a.age < b.age ? -1 : 1),
).subscribe((x) => console.log(x.name));
// 'Beer'

上面的例子很简单,传入比较器根据 age 属性进行对象大小比较,最后输出最大值。

使用弹珠图表示 max 的流程:

image.png

min

min 是与 max 相反的操作,取系列数据的最小值,相关的策略和参数与 max 操作符是相同的,因此这里不需要过多介绍了。

min 的弹珠图:

image.png

count

count 是统计操作符,它的作用是统计一个流中全部数据的数量,因为涉及到全部数据统计,因此它也只能作用于有限流,当流结束时输出计数统计结果。举个例子:

interval(1000).pipe(
    takeUntil(fromEvent(document, 'click')),
    count()
).subscribe(x => console.log(x));

在这个例子中,当收到点击时流结束,因此这里的 count 统计的是到点击为止产生过的数据的个数。

弹珠图:

image.png

reduce

在数组中有一个非常强大的操作叫 reduce,它的作用是实现一组数据的的累积效果,可以接收前一次数据和当前数据作为参数,每次进行一个处理,最终计算出一个结果。在 Rxjs 中针对流也同样有一个 reduce 方法,它的用法与数组基本上是一致的,可以实现一个统计的效果,举一个求和的例子:

of(1, 2, 3).pipe(reduce((p, c) => p + c, 0)).subscribe(x => console.log(x));
// 6

这里打印出了最终的结果,这个操作同样也是作用于有限流,只会输出最后的结果。如果想获取到过程中每次计算的值,在 Rxjs 中有 scan 操作符,我们之前接触过,scan 会发出每次累积的值,这里注意二者区别。

reduce 的弹珠图:

image.png

这一部分数学和聚合操作符就到此为止,至此常见的操作符基本上都介绍过了,操作符是 Rxjs 中一切的基础,后面文章会继续介绍 Rxjs 其他部分内容。