RxJS 中的 distinctUntilChanged 操作符使用详解
在 RxJS 中，distinctUntilChanged 是一个很有用的操作符，它可以让我们只获取连续发射的不同值，而忽略连续相同的值。这篇文章将详细介绍如何使用这个操作符，以及一些应该注意的地方。
- 操作符的引入
在 RxJS 中使用 distinctUntilChanged 操作符，需要先进行引入。在 import 引入 RxJS 之后，我们可以这样来引入 distinctUntilChanged：
import { distinctUntilChanged } from 'rxjs/operators';- 操作符的使用方法
使用 distinctUntilChanged 操作符非常简单，只需要在流中调用即可。这个操作符的具体用法如下：
observable$.pipe(distinctUntilChanged());
这里，observable$ 表示要操作的流。在这个操作符中，如果将它作为无参函数调用，它就会比较当前发射的值与前一个发射的值，并过滤掉连续的相同的值。
例如，我们有以下流：
const observable$ = from([1, 2, 2, 3, 4, 4, 4, 5]);
如果我们使用以下代码来进行过滤：
observable$.pipe(distinctUntilChanged());
那么我们将得到如下输出：
1 2 3 4 5
这样我们就得到了这个流中不同的值，而忽略了连续相同的值。
- 自定义判断条件
在某些情况下，我们可能需要根据自己的方式来判断是否是重复值。例如，我们可以使用一个自定义的比较函数来过滤掉一些符合条件的值。
如果我们自定义一个比较函数，它接收两个参数，比较它们的大小是否相等，那么我们可以在 distinctUntilChanged 中使用这个比较函数来过滤流中的值。
observable$.pipe(distinctUntilChanged((val1, val2) => val1.id === val2.id));
这里，我们使用了一个比较函数，它会判断两个对象的 id 是否相等。如果相等，那么它就会过滤掉后面相同 id 的对象。
- 指定 key
我们也可以使用 distinctUntilChanged 操作符来针对某个 key 进行比较。
observable$.pipe(distinctUntilChanged((val) => val.id));
这样，我们就可以仅仅针对 id 这个 key 来比较对象，而不是整个对象的内容进行比较。如果我们有一个数组对象，它包含了很多相同的元素，但是它们的 id 不同，那么我们就可以通过指定 key 来进行区分。
- 总结
在 RxJS 中，distinctUntilChanged 是一个非常有用的操作符，它可以去掉连续的相同的值，并只保留不同的值。
它的使用方法非常简单，只需要在流中调用即可。我们还可以自定义比较函数，来根据自己的逻辑进行过滤。
在使用过程中，需要注意一些细节。例如，我们需要了解流的内容和流的结构，才能正确使用这个操作符。
RxJS 的操作符非常丰富，学好这些操作符可以让我们更好的处理流式数据，提高编程效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64570c11968c7c53b09e5582