RxJS distinct运算符没有从对象数组中获取distinct值

RxJS 的 distinct 运算符用于从源 Observable 中过滤掉重复的值。然而，当处理对象数组时，默认的 distinct 运算符可能无法按预期工作，因为它比较的是对象的引用，而不是对象的内容。

基础概念

distinct 运算符通过比较每个源值来过滤掉重复的值。默认情况下，它使用严格相等（===）来比较值。

问题原因

对于对象数组，即使两个对象的内容相同，它们的引用也是不同的，因此 distinct 运算符无法识别它们为重复值。

解决方法

为了使 distinct 运算符能够根据对象的内容进行去重，可以使用 distinctUntilChanged 运算符，并提供一个自定义的比较函数。

示例代码

import { of } from 'rxjs';
import { distinctUntilChanged, map } from 'rxjs/operators';

const source = of(
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 1, name: 'Alice' },
  { id: 3, name: 'Charlie' }
);

source.pipe(
  map(obj => obj.id), // 提取对象的 id 属性
  distinctUntilChanged() // 根据 id 属性去重
).subscribe(console.log);

在这个示例中，我们首先使用 map 运算符提取对象的 id 属性，然后使用 distinctUntilChanged 运算符根据 id 属性去重。

参考链接

RxJS distinctUntilChanged

应用场景

这种去重方法适用于需要根据对象的某个属性（如 id、name 等）进行去重的场景，例如从数据库查询数据、处理用户输入等。

其他解决方案

如果需要根据对象的多个属性进行去重，可以使用 distinctUntilChanged 运算符并提供一个自定义的比较函数。

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

const source = of(
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 1, name: 'Alice' },
  { id: 3, name: 'Charlie' }
);

source.pipe(
  distinctUntilChanged((prev, curr) => prev.id === curr.id && prev.name === curr.name)
).subscribe(console.log);

在这个示例中，我们提供了一个自定义的比较函数，根据对象的 id 和 name 属性进行去重。

通过这些方法，可以有效地解决 RxJS distinct 运算符在处理对象数组时无法去重的问题。