RxJS 是一个流行的 JavaScript 库，它提供了一种响应式编程的方式来处理异步数据流。在 RxJS 中，有许多有用的操作符可以帮助我们更方便地处理数据流。其中一个操作符就是 distinctUntilChanged。
distinctUntilChanged 方法的作用
distinctUntilChanged 是 RxJS 中的一个操作符，它可以过滤掉连续重复的数据项，只保留第一次出现的数据项。这个操作符可以用于处理一些需要去重的数据流，例如用户输入的搜索关键字、网络请求返回的数据等等。
distinctUntilChanged 方法的使用示例
下面是一个使用 distinctUntilChanged 的简单示例，它演示了如何过滤掉连续重复的数据项：
import { of } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';
const source$ = of(1, 1, 2, 2, 3, 3, 4, 5, 5);
const result$ = source$.pipe(distinctUntilChanged());
result$.subscribe(console.log); // 输出 1, 2, 3, 4, 5在这个示例中，我们使用 of 方法创建了一个包含多个重复数据项的数据流 source$，然后通过 pipe 方法调用 distinctUntilChanged 操作符来过滤掉连续重复的数据项。最后，我们订阅了 result$ 数据流，并将结果输出到控制台。
distinctUntilChanged 方法的高级使用
除了基本用法外，distinctUntilChanged 还有一些高级用法，可以让我们更加灵活地处理数据流。
比较函数
distinctUntilChanged 方法默认使用 === 来比较数据项是否相等，但是有时候我们需要使用自定义的比较函数来判断数据项是否相等。这时可以传递一个比较函数作为参数给 distinctUntilChanged 方法。
下面是一个使用比较函数的示例：
import { of } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';
const source$ = of({ name: 'Alice' }, { name: 'Bob' }, { name: 'Alice' });
const result$ = source$.pipe(distinctUntilChanged((prev, curr) => prev.name === curr.name));
result$.subscribe(console.log); // 输出 { name: 'Alice' }, { name: 'Bob' }, { name: 'Alice' }在这个示例中，我们使用 of 方法创建了一个包含多个对象的数据流 source$，每个对象都有一个 name 属性。然后我们通过 pipe 方法调用 distinctUntilChanged 操作符，并传递了一个比较函数作为参数，这个比较函数用来比较两个对象的 name 属性是否相等。最后，我们订阅了 result$ 数据流，并将结果输出到控制台。
状态选择器
有时候我们只想比较对象的某个属性，而不是整个对象。这时可以使用状态选择器（state selector）来指定要比较的属性。
下面是一个使用状态选择器的示例：
import { of } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';
const source$ = of({ name: 'Alice', age: 20 }, { name: 'Bob', age: 30 }, { name: 'Alice', age: 25 });
const result$ = source$.pipe(distinctUntilChanged((prev, curr) => prev.age === curr.age, person => person.age));
result$.subscribe(console.log); // 输出 { name: 'Alice', age: 20 }, { name: 'Bob', age: 30 }, { name: 'Alice', age: 25 }在这个示例中，我们使用 of 方法创建了一个包含多个对象的数据流 source$，每个对象都有一个 name 和一个 age 属性。然后我们通过 pipe 方法调用 distinctUntilChanged 操作符，并传递了两个参数：一个比较函数和一个状态选择器。比较函数用来比较两个对象的 age 属性是否相等，而状态选择器用来选择要比较的属性。最后，我们订阅了 result$ 数据流，并将结果输出到控制台。
总结
RxJS 的 distinctUntilChanged 方法可以帮助我们过滤掉连续重复的数据项，它有许多有用的高级用法，可以让我们更加灵活地处理数据流。在实际开发中，我们可以根据具体的业务需求来选择合适的用法来处理数据流。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657bf86fd2f5e1655d6afbfb