什么是 RxJS
RxJS 是 ReactiveX JavaScript 的简称，是一款基于可观察序列的编程框架。它允许开发者使用可观察序列的方式来处理异步事件并简化异步编程。
在 RxJS 中，我们可以创建可观察序列来表示聚合一系列的异步事件。这些事件可以是开始异步请求、异步数据源变化、用户输入等等。通过操作这些可观察序列，我们可以实现各种强大的功能，如过滤、 收集、 合并、 转换等。
什么是 distinctUntilChanged
distinctUntilChanged 是 RxJS 中的一个操作符，它用于去除可观察对象中连续的重复元素。
流中的每个元素都被形成为一个新的元素，当流经这个操作符时，对比当前元素与上一个元素，如果它们相等，则被过滤掉。
如何使用 distinctUntilChanged
要使用 distinctUntilChanged，我们需要使用 RxJS 的操作符 pipe()，在 pipe() 中传入需要执行的所有操作符。
下面是一个示例代码：
import { from } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';
const source = from([1, 1, 2, 2, 3, 3, 3, 4, 4, 4, 4]);
source.pipe(
distinctUntilChanged()
).subscribe(console.log); // 输出 1 2 3 4在上述示例中，我们使用 from() 创建一个 observable，它会发出一个数组。在 pipe() 中，我们使用 distinctUntilChanged() 操作符来过滤连续的重复元素。最后，使用 subscribe() 来订阅流并输出结果到控制台。
RxJS 实践：使用 distinctUntilChanged 过滤重复请求
我们可以将 distinctUntilChanged 应用到更多的实际开发场景中。下面是一个使用 distinctUntilChanged 的实际场景，模拟用户在短时间内多次点击登录按钮，每次点击会发送一次登录请求。
-- -------------------- ---- ------- ------ - --------------- - ---- ------- ------ - -------------------- - ---- ----------------- --- ------------ - -- ----- -------- - ------------------------------------- ----- ------ - --- ------------------- ------------ ----------------------- -------------- -- - --------------- ------------------ -------- ----------------- --- ---------------------------------- -- -- - -------------------------- ---
在上述代码中，我们使用 BehaviorSubject 创建一个可观察序列，它会以 0 为初始值，并且会记录点击次数。我们使用 click$.pipe() 来订阅用户点击次数，并使用 distinctUntilChanged() 操作符来过滤连续相同的元素。每次点击都会发送一个请求，同时在控制台输出当前点击次数。
通过这个例子，我们可以看到 distinctUntilChanged 在处理连续的重复数据上非常有用。
总结
RxJS 是一个强大的基于可观察序列的编程框架，它可以帮助我们处理异步事件并简化异步编程。其中，distinctUntilChanged 是 RxJS 提供的一个重要的操作符之一，它可以过滤连续的重复元素。我们可以将它应用到很多实际场景中，如过滤用户输入、减少重复请求等等，帮助我们提高开发效率，减少代码复杂度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a2957248841e9894f02d4c