在 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() 非常相似，它也是只和上一个值比较。但有一点不同的是，它可以用来过滤一个对象流中某个属性相同的值。我们看一个例子：
-- -------------------- ---- ------- ------ - ---- - ---- ------- ------ - ----------------------- - ---- ----------------- ----- ------- - ------ - --- -- ----- ------- -- - --- -- ----- ----- -- - --- -- ----- ------- -- - --- -- ----- --------- -- - --- -- ----- ------- -- - --- -- ----- ------- -- --- ----- ------------------------ - -------------------------------------------- ------------------------------------ -- ----------------
输出为：
{ 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