在 RxJS 中，distinct 和 distinctUntilChanged 两个操作符可以用来去重，但它们的使用场景和功能略有不同。在本篇文章中，我们将详细介绍这两个操作符的使用方法，并讨论它们的实际应用场景。
distinct 操作符
distinct 操作符会把一个 Observable 中重复的元素去除。它会比较每个元素是否和之前的元素相等，如果相等就不输出此元素。以下是该操作符的代码示例：
import { from } from 'rxjs';
import { distinct } from 'rxjs/operators';
const source$ = from([1, 2, 3, 4, 4, 5, 5, 1]);
source$.pipe(distinct()).subscribe(console.log);
// output: 1 2 3 4 5从上面的代码可以看出，我们传入的数据源包含重复元素，但输出时已经被去重处理了。distinct 操作符默认使用 JavaScript 中的全等操作符来比较元素，如果需要传入自定义的比较函数，可以使用可选参数 keySelector。
除此之外，distinct 操作符还支持使用多个流进行比较，我们只需传入一个可变参数即可：
import { from, merge } from 'rxjs';
import { distinct } from 'rxjs/operators';
const source1$ = from([1, 2, 3, 4, 5, 6]);
const source2$ = from([1, 3, 5, 7, 9]);
const merged$ = merge(source1$, source2$);
merged$.pipe(distinct()).subscribe(console.log);
// output: 1 2 3 4 5 6 7 9从上述示例中可以看出，使用 merge 将两个 Observable 合并成一个之后，再使用 distinct 去除重复元素，可以得到两个 Observable 中所有不同的元素。
distinctUntilChanged 操作符
与 distinct 不同的是，distinctUntilChanged 只去除连续重复的元素。也就是说，在重复元素连续出现的情况下，只输出第一个元素，其他的都被忽略。以下是该操作符的代码示例：
import { from } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';
const source$ = from([1, 2, 2, 3, 3, 3, 4, 4, 5, 1, 1]);
source$.pipe(distinctUntilChanged()).subscribe(console.log);
// output: 1 2 3 4 5 1从示例代码中可以看到，虽然 2 和 3 在原数组中都出现了多次，但只有第一次出现的元素被保留了下来，其他的都被忽略掉了。
与 distinct 操作符一样，distinctUntilChanged 也支持可选参数 keySelector，用来自定义比较函数。
总结
在实际应用中，distinct 和 distinctUntilChanged 操作符都可以用来去重，但它们的使用场景和功能略有不同。distinct 可以去除整个 Observable 中的重复元素，而 distinctUntilChanged 只去除连续重复的元素。
在实际开发中，distinct 通常用于去除重复的请求，并限制重复请求的频率，而 distinctUntilChanged 则常常用于过滤一些很短的连续事件，只取其中最先出现的事件。
通过深入了解这两个操作符的使用方法和实际应用场景，我们可以更好地掌握 RxJS 的核心功能，提高我们的开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64732661968c7c53b00a6433