在 RxJS 的世界中，有两个看似相似但却有很大区别的操作符：scan 和 reduce。它们都是用于对序列数据进行聚合操作的，但是却有不同的使用场景和效果。
什么是 RxJS
RxJS 是 JavaScript 中的一个响应式编程库，提供了处理异步数据流的解决方案。它可以帮助我们简化复杂的异步代码，避免回调地狱和异步嵌套，提高代码的可读性和可维护性。
scan 操作符
scan 是 RxJS 中一个非常有用的操作符，它可以帮助我们将一个序列的数据聚合成一个最终的结果，类似于 JavaScript 中的 reduce 方法。不过 scan 的使用方式略微有些不同。
使用方式
scan 的使用方式如下：
observable.pipe(scan(accumulator, seed))
accumulator: 一个回调函数，用于将每个输入值聚合到累加器中。seed: 累加器的初始值。
示例代码
const { from } = rxjs;
const { scan } = rxjs.operators;
const source$ = from([1, 2, 3, 4, 5]);
const example$ = source$.pipe(
scan((accumulator, currentValue) => accumulator + currentValue, 0)
);
example$.subscribe(console.log); // 输出 1, 3, 6, 10, 15在上面的代码中，scan 操作符将从 source$ 中接收到的每个输入值累加到累加器中，并将当前的累加结果发出，最终输出累加器中的最后一个值：15。
reduce 操作符
reduce 也是一个聚合操作符，它可以将一个序列的数据聚合成一个最终的结果。不过，它和 scan 之间有一个重大的区别：reduce 只发出一个值 - 最终的结果。
使用方式
reduce 的使用方式如下：
observable.pipe(reduce(accumulator, seed))
accumulator: 一个回调函数，用于将每个输入值聚合到累加器中。seed: 累加器的初始值。
示例代码
const { from } = rxjs;
const { reduce } = rxjs.operators;
const source$ = from([1, 2, 3, 4, 5]);
const example$ = source$.pipe(
reduce((accumulator, currentValue) => accumulator + currentValue, 0)
);
example$.subscribe(console.log); // 输出 15在上面的代码中，reduce 操作符将从 source$ 中接收到的每个输入值累加到累加器中，并将最终的结果发出，最终输出结果为：15。
两者的区别
尽管 scan 和 reduce 都是聚合操作符，但是它们之间有些区别：
scan发出每次计算后的结果，而reduce只发出最终的结果。scan可以用于输出序列中的中间结果，而reduce只会输出最终结果。scan可以不使用初始值，但是reduce必须使用初始值。
总结
在 RxJS 中，scan 和 reduce 都是非常有用的聚合操作符，它们可以帮助我们简化处理异步数据流的代码，提高代码的可读性和可维护性。
需要注意的是，两者之间存在一些细微的区别，需要根据具体的场景进行选择。比如，如果需要输出序列中的中间结果，那么应该使用 scan，如果只需要输出最终结果，那么应该使用 reduce。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6590d3e7eb4cecbf2d618f62