本文介绍在使用 RxJS 的 combineLatest 时，如何通过 distinctUntilChanged 过滤掉与上一次完全相同的数组发射值，实现“仅当任一源值变化时才触发订阅”，避免冗余处理。
本文介绍在使用 rxjs 的 `combinelatest` 时，如何通过 `distinctuntilchanged` 过滤掉与上一次完全相同的数组发射值，实现“仅当任一源值变化时才触发订阅”，避免冗余处理。
在响应式编程中，combineLatest 是一个高频使用的操作符，它会在每个输入 Observable 至少发出一个值后，持续组合最新值并发射。但其默认行为是“只要有任一源发出新值，就立即发射新组合”——即使组合结果与上一次完全相同（例如 [ 'one', false ] → [ 'one', false ]），也会触发下游订阅。这在状态同步、UI 渲染或副作用处理等场景中可能导致不必要的计算、重复请求或闪烁。
要解决这一问题，核心思路是：对 combineLatest 的输出流进行去重，且基于整个元组值（而非单个元素）判断是否变化。RxJS 提供了 distinctUntilChanged 操作符，它可接收自定义比较函数，精准控制“何时视为重复”。
以下是一个完整、可运行的示例：
import { Subject, combineLatest } from 'rxjs';
import { distinctUntilChanged, map } from 'rxjs/operators';
const first$ = new Subject<string>();
const second$ = new Subject<boolean>();
// 组合两个流，并过滤掉与前一次完全相同的数组
const combined$ = combineLatest([first$, second$]).pipe(
distinctUntilChanged((prev, curr) =>
prev[0] === curr[0] && prev[1] === curr[1]
)
);
combined$.subscribe(([first, second]) => {
console.log('✅ 新有效组合:', first, second);
});
// ✅ 首次发射 → 触发订阅
first$.next('one');
second$.next(false); // 输出: ✅ 新有效组合: 'one' false
// ❌ 相同值再次发射 → 被过滤，不触发
first$.next('one');
second$.next(false); // 无输出
// ✅ 值发生变化 → 触发订阅
second$.next(true); // 输出: ✅ 新有效组合: 'one' true
// ✅ 即使 first 未变，second 变化仍触发
first$.next('two'); // 输出: ✅ 新有效组合: 'two' true⚠️ 关键注意事项：
- distinctUntilChanged 默认仅比较引用（===），因此必须显式传入比较函数，否则对数组对象会始终返回 false（因每次 combineLatest 生成的是新数组实例）；
- 比较函数应严格对比每个位置的值（如 prev[0] === curr[0] && prev[1] === curr[1]），确保语义一致性；
- 若源 Observable 发射频率极高，建议配合 debounceTime 或 throttleTime 进一步优化性能；
- 对于多于两个 Observable 的场景，可将比较逻辑泛化为 prev.every((v, i) => v === curr[i])，提升可维护性。
总结来说，combineLatest + distinctUntilChanged 的组合，是构建“智能响应式状态流”的黄金搭档：前者确保数据新鲜度，后者保障执行效率。合理运用，可显著提升 Angular、React+RxJS 等架构下的应用健壮性与用户体验。
