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
属性去重。
这种去重方法适用于需要根据对象的某个属性(如 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
运算符在处理对象数组时无法去重的问题。
领取专属 10元无门槛券
手把手带您无忧上云