告别重复数据：RxJS中distinct与distinctUntilChanged的实战指南
项目地址: https://gitcode.com/gh_mirrors/rx/rxjs 你是否还在为数据流中的重复值烦恼？用户输入防抖、API响应去重、状态更新过滤——这些高频场景都需要高效的数据去重方案。本文将深入解析RxJS中最常用的两个去重操作符distinct与distinctUntilChanged的实现原理与适用场景，通过5个实战案例带你掌握响应式编程中的去重技巧，最终能根据业务需求精准选择最优去重策略。
核心原理对比
distinct：历史全集去重
distinct操作符通过维护一个Set集合记录所有已发射值，仅允许从未出现过的值通过。其核心实现位于distinct.ts，关键逻辑如下：
const distinctKeys = new Set();
next: (value) => {
const key = keySelector ? keySelector(value) : value;
if (!distinctKeys.has(key)) {
distinctKeys.add(key);
destination.next(value);
}
}
这种机制确保整个流生命周期内不会出现重复值，但随着数据量增长会持续占用内存。
distinctUntilChanged：相邻值去重
与distinct不同，distinctUntilChanged仅比较当前值与上一个发射值，实现代码见distinctUntilChanged.ts：
let previousKey: K;
let first = true;
next: (value) => {
const currentKey = keySelector(value);
if (first || !comparator!(previousKey, currentKey)) {
first = false;
previousKey = currentKey;
destination.next(value);
}
}
这种"只看前一个"的特性使其内存占用恒定，但无法过滤非相邻的重复值。
应用场景与案例
1. 基础值类型去重
用户场景：过滤传感器重复读数
实现方案：使用distinct实现全量去重
import { of } from 'rxjs';
import { distinct } from 'rxjs/operators';
of(1, 1, 2, 2, 3, 2, 1)
.pipe(distinct())
.subscribe(console.log);
// 输出: 1, 2, 3 (所有历史重复值均被过滤)
2. 对象属性去重
用户场景：处理用户列表，确保同一用户只显示一次
实现方案：通过keySelector指定去重键
of(
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 1, name: 'Alice' }
)
.pipe(distinct(user => user.id))
.subscribe(console.log);
// 输出前两个对象，第三个因id重复被过滤
3. 相邻重复值过滤
用户场景：实时股价展示，仅在价格变化时更新UI
实现方案：distinctUntilChanged高效过滤连续重复值
import { interval } from 'rxjs';
import { distinctUntilChanged, map } from 'rxjs/operators';
// 模拟股价数据流
interval(1000)
.pipe(
map(() => Math.floor(Math.random() * 3) + 10), // 10-12随机股价
distinctUntilChanged()
)
.subscribe(price => updateUI(price));
// 仅当价格变化时才更新界面
4. 自定义比较逻辑
用户场景：温度监测系统，仅在温度变化超过0.5℃时触发警报
实现方案：自定义比较函数实现阈值过滤
import { of } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';
of(23.1, 23.3, 23.6, 23.5, 24.1)
.pipe(
distinctUntilChanged((prev, curr) => {
return Math.abs(prev - curr) < 0.5;
})
)
.subscribe(temp => triggerAlert(temp));
// 输出: 23.1, 23.6, 24.1 (变化小于0.5℃的值被过滤)
5. 复杂对象比较
用户场景：表单提交前验证，仅在关键字段变化时启用提交按钮
实现方案：结合keySelector与自定义比较器
of(
{ name: 'John', age: 30, address: 'NY' },
{ name: 'John', age: 30, address: 'CA' },
{ name: 'John', age: 31, address: 'CA' }
)
.pipe(
distinctUntilChanged(
(prev, curr) => prev.age === curr.age && prev.address === curr.address,
user => ({ age: user.age, address: user.address })
)
)
.subscribe(console.log);
// 输出所有三个对象（每次关键信息组合均不同）
性能与内存优化
内存占用对比
| 操作符 | 内存复杂度 | 适用场景 |
|---|---|---|
| distinct | O(n) - 随数据流增长 | 短数据流、严格去重需求 |
| distinctUntilChanged | O(1) - 恒定内存 | 长数据流、高频更新场景 |
优化建议
- 大流量场景：优先使用
distinctUntilChanged控制内存增长 - 定期清理：对
distinct可配合flushes参数定期清除历史记录：distinct(keySelector, interval(60000)) // 每分钟清空一次缓存 - 关键属性提取：使用
keySelector减少比较开销，避免全对象比较
工程实践指南
常见错误案例
错误用法：对大流量无界流使用distinct
// 危险示例：无限增长的内存占用
fromEvent(document, 'mousemove')
.pipe(distinct(e => e.clientX + e.clientY))
.subscribe();
正确做法：改用distinctUntilChanged或添加清除机制
// 优化方案：仅比较相邻坐标
fromEvent(document, 'mousemove')
.pipe(distinctUntilChanged((prev, curr) => prev.clientX === curr.clientX && prev.clientY === curr.clientY))
.subscribe();
最佳实践清单
- 简单去重优先考虑
distinctUntilChanged（内存友好） - 全量去重使用
distinct时务必设置flushes定期清理 - 复杂对象比较必须指定
keySelector，避免默认引用比较 - 自定义比较器应保持纯函数特性，避免副作用
总结与扩展学习
distinct与distinctUntilChanged作为RxJS中最常用的去重工具，分别解决了"历史全集去重"和"相邻值去重"两类核心问题。选择时需根据数据特征和业务需求权衡：短数据流且需严格去重选distinct，长数据流或高频更新场景选distinctUntilChanged。
官方文档提供了更多高级用法示例：
掌握这些响应式去重技巧，将有效提升你的数据流处理能力，让应用更高效地处理重复数据问题。
点赞收藏本文，下期将带来《RxJS背压处理：从buffer到window的流量控制实战》，深入探讨高并发场景下的数据处理策略。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
