在 RxJS 中，distinctUntilChanged 操作符是一种非常常用的操作符之一。它可以帮助我们过滤掉重复的数据，而只保留不同于前一个值的数据。
操作符使用方法
distinctUntilChanged 操作符返回一个 Observable，原始 Observable 订阅它后，它会发送原始 Observable 中不同于前一个值的数据。
可以在 Observable 中添加该操作符，以过滤掉重复的数据。具体的使用方法如下：
import { from } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';
const obs = from([1, 2, 3, 3, 4, 1, 1, 5]);
obs.pipe(distinctUntilChanged())
.subscribe(val => console.log(val));上述代码中我们定义了一个 Observable，它发送了一些普通数字，我们通过使用 distinctUntilChanged 来过滤掉重复的数据。订阅后，我们期望只得到以下值：1, 2, 3, 4, 1, 5。
操作符工作原理
当一个数据流到达 distinctUntilChanged 操作符，它会与前一个值进行比较。如果它和前一个值相同，则会被过滤掉；如果它和前一个值不同，则会发射这个数据。
因此，在一个由多个值组成的 Observable 中，这个操作符只发送与前一个值不同的数据，而不是不同于所有已发出值的数据。
举例说明，假设我们有一个 Observable，它发送了以下值：1, 2, 2, 3, 3, 3, 4, 4, 4, 1。使用 distinctUntilChanged 操作符，我们得到的结果序列是：1, 2, 3, 4, 1。
操作符使用场景
distinctUntilChanged 操作符可以用于以下场景：
- 忽略重复的用户输入，如在搜索框中输入相同的关键字。
- 避免重新渲染相同的 UI 元素，如使用虚拟滚动加载大量数据时。
- 避免重复的网络请求，如数据缓存和请求失败重新尝试时。
可配置的参数
distinctUntilChanged 操作符还有一个可选参数，用于自定义比较方式。在不提供该参数时，操作符使用默认运算符 === 来比较值是否相等。
我们可以自定义比较函数来处理更复杂的数据类型。例如，考虑以下代码：
// javascriptcn.com 代码示例
import { from } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';
interface Person {
name: string;
age: number;
}
const people: Person[] = [
{ name: 'John', age: 30 },
{ name: 'Mary', age: 30 },
{ name: 'Mark', age: 35 },
{ name: 'John', age: 30 },
{ name: 'Mary', age: 31 },
];
function comparePeople(prev: Person, curr: Person) {
return prev.name === curr.name && prev.age === curr.age;
}
const obs = from(people);
obs.pipe(distinctUntilChanged(comparePeople))
.subscribe(person => console.log(person));在上面的代码中，我们定义了一个 Person 类型的接口，并创建了一个由不同对象组成的数组。我们然后定义了我们自己的比较函数 comparePeople，用于比较两个 Person 对象是否相同。最后，我们通过订阅 Observable 来得到不同的 Person 对象。
总结
distinctUntilChanged 操作符是 RxJS 中必备的操作符之一。它可以帮助我们过滤掉连续发送的重复值，简化数据处理过程。我们可以使用它来处理各种数据类型，以及在各种场景下优化我们的代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65372ff87d4982a6ebf99f1c