关于 Rxjs 中 Reduce Scan 的区别

JavaScript 评论

官方手册：https://cn.rx.js.org/class/es6/Observable.js~Observable.html#instance-method-scan

关于Scan 官方描述的比较抽象
实质上和 Reduce 非常相像，熟悉 Array.reduce 的同学对Rxjs 中的Reduce 操作符想必也不陌生。

而 Scan 和 Reduce 在 归并 的原理上是相同的，唯一不同的 Emit 的时机。

Scan

apply a function to each item emitted by an Observable, sequentially, and ==emit each successive value==

Ex:

1
2
3
4
5
6
7
8
9
10
// 依次递加元素
of(1, 2, 3).pipe(scan((acc, curr) => curr + acc))
.subscribe(val => {
    console.log('res: ' + val)
})

// 输出结果
res: 1
res: 3
res: 6

也就是在每次 scan 归并后，立即触发 subscribe.

reduce

apply a function to each item emitted by an Observable, sequentially, and ==emit the final value==

Ex:

1
2
3
4
5
6
7
8
// 依次递加元素
of(1, 2, 3).pipe(reduce((acc, curr) => curr + acc))
.subscribe(val => {
    console.log('res: ' + val)
})

// 输出结果
res: 6

也就是在每次 reduce 归并后，没有立即触发 subscribe，而是在最终结束归并后，才发出消息。

参考资料：

https://rxjs-cn.github.io/learn-rxjs-operators/operators/transformation/scan.html
https://stackoverflow.com/questions/45350806/whats-difference-between-reduce-and-scan