1. 操作符 distinct 的介绍
RxJS 提供了许多操作符来处理数据流，其中一个非常有用的操作符是 distinct，它可以从数据流中剔除重复的数据，并只发出那些前面没有发出过的数据。
2. distinct 操作符的实现方式
distinct 操作符的实现方式很简单，它使用了一个 Set 对象来存储前面发出的数据，每当有新的数据流经过时，它会先判断这个数据是否已经在 Set 中存在，如果存在，就不发出这个数据；反之，就把这个数据添加到 Set 中，并发出这个数据。
3. distinct 操作符的用法
在 RxJS 中，我们可以使用 distinct 操作符来剔除重复的数据，它的用法如下：
import { of } from 'rxjs';
import { distinct } from 'rxjs/operators';
const source = of(1, 2, 3, 2, 4, 3, 5, 4, 1);
const distinctSource = source.pipe(distinct());
distinctSource.subscribe(x => console.log(x));在上面的代码中，我们使用 of 操作符创建一个包含重复数据的数据流，然后使用 distinct 操作符来剔除重复的数据，并最终将剩下的数据打印到控制台上。
运行这段代码，我们可以看到控制台输出了如下内容：
1 2 3 4 5
可以看到，distinct 操作符成功地剔除了重复的数据。
4. distinct 操作符的高级用法
在上面的例子中，我们使用的是默认的 distinct 操作符，它只会剔除相邻的重复数据，如果两个重复的数据不是相邻的，它就不能剔除。
如果我们想要剔除任意的重复数据，我们可以使用 distinct 操作符的高级用法，它接受一个参数，这个参数可以是一个函数，也可以是一个对象的属性名，用来指定如何比较两个数据是否相等，从而进行剔除。
-- -------------------- ---- ------- ------ - -- - ---- ------- ------ - -------- - ---- ----------------- ----- ------ - --- ---- -- ----- ------- ---- -- ----- --------- ---- -- ----- ------- ---- -- ----- -------- -- ----- -------------- - ------------ ------------- -- ---------- -- -------------------------- -- ----------------
在上面的代码中，我们用 of 操作符创建了一个包含重复数据的对象数组的数据流，然后使用 distinct 操作符，指定它要根据对象的 name 属性来剔除重复数据，并最终将剩下的数据打印到控制台上。
运行这段代码，我们可以看到控制台输出了如下内容：
{id: 1, name: 'Tom'}
{id: 2, name: 'Jerry'}可以看到，distinct 操作符成功地剔除了重复的数据，并只发出了不同的两条数据。
5. 总结
在实际开发中，我们经常需要对数据流进行处理，而 distinct 操作符是一个非常有用的操作符，可以帮助我们剔除重复的数据，从而减少无效的计算和网络请求。
在使用 distinct 操作符时，我们需要注意它的默认实现只能剔除相邻的重复数据，如果需要剔除任意的重复数据，就需要使用它的高级用法，指定自定义的比较函数或比较属性名。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ab2cf0add4f0e0ff4ca99a