RxJS 中的操作符：distinct、distinctUntilChanged 和 distinctUntilKeyChanged 的区别

在 RxJS 中，distinct、distinctUntilChanged 和 distinctUntilKeyChanged 都是非常常用的操作符，它们用于过滤重复的值，有一定的相似性，但又存在差别。我们来一一了解一下它们的区别。

distinct

distinct() 操作符可以从 Observable 流中过滤掉重复的值。它将每个发射的数据都和之前的数据进行比较操作，如果相同就忽略，如果不同就发射。我们看一个简单的例子：

import { from } from 'rxjs';
import { distinct } from 'rxjs/operators';

const source$ = from([1,2,2,3,3,3,4,4,4,4]);
const distinct$ = source$.pipe(distinct());

distinct$.subscribe(x => console.log(x));

输出为：

1
2
3
4

distinctUntilChanged

distinctUntilChanged() 同样是过滤掉重复的值，它和 distinct() 的不同在于，不需要和之前的所有值进行比较，只需要和上一个值比较。我们看一个例子：

import { from } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';

const source$ = from([1,2,2,3,3,3,4,4,4,4]);
const distinctUntilChanged$ = source$.pipe(distinctUntilChanged());

distinctUntilChanged$.subscribe(x => console.log(x));

输出为：

1
2
3
4

distinctUntilKeyChanged

distinctUntilKeyChanged() 操作符和 distinctUntilChanged() 非常相似，它也是只和上一个值比较。但有一点不同的是，它可以用来过滤一个对象流中某个属性相同的值。我们看一个例子：

import { from } from 'rxjs';
import { distinctUntilKeyChanged } from 'rxjs/operators';

const source$ = from([
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 2, name: 'Alice' },
  { id: 3, name: 'Charlie' },
  { id: 3, name: 'David' },
  { id: 3, name: 'David' },
]);
const distinctUntilKeyChanged$ = source$.pipe(distinctUntilKeyChanged('id'));

distinctUntilKeyChanged$.subscribe(x => console.log(x));

输出为：

{ id: 1, name: 'Alice' }
{ id: 2, name: 'Bob' }
{ id: 3, name: 'Charlie' }

可以看出，它只返回了 id 不同的对象，而忽略了 id 相同但 name 不同的对象。

总结

• distinct() 会和之前的所有值进行比较，每个都会被检查一遍，而 distinctUntilChanged() 仅和上一个值比较；
• 以上两个操作符用于过滤简单数据流，而 distinctUntilKeyChanged() 适用于过滤对象流中某个属性相等的值。

因此，在使用 RxJS 进行开发时，需要根据具体的业务场景来选择不同的操作符，以达到最佳的应用效果。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659277d8eb4cecbf2d741338