本文介绍在 RxJS 中结合 combineLatest 时，如何通过 distinctUntilChanged 过滤掉与上一次合并结果完全相同的发射值，从而避免冗余处理。
本文介绍在 rxjs 中结合 `combinelatest` 时，如何通过 `distinctuntilchanged` 过滤掉与上一次合并结果完全相同的发射值，从而避免冗余处理。
在响应式编程中，combineLatest 是一个常用操作符，用于监听多个 Observable 并在任一源发出新值时，组合最新值进行计算。但其默认行为是“只要有任意一个源更新就发射”，这可能导致大量重复数据（例如两个源同时多次发出相同值），进而引发不必要的副作用（如重复 API 调用、重复 UI 渲染等）。
要实现“仅当组合后的值相比上一次发生实质性变化时才通知订阅者”，核心解决方案是：在 combineLatest 后链式调用 distinctUntilChanged，并自定义比较逻辑。
distinctUntilChanged 默认仅对单值进行浅比较，而 combineLatest 输出的是数组（如 [first, second]），因此必须显式提供比较函数，判断前后两个数组是否“逻辑相等”。
✅ 正确做法如下：
import { combineLatest, Subject } 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]
),
map(([first, second]) => ({
key: first,
enabled: second,
timestamp: Date.now()
}))
);
combined$.subscribe(console.log);
// 示例执行流：
first$.next('one'); // → 发射: { key: 'one', enabled: undefined, ... }
second$.next(false); // → 发射: { key: 'one', enabled: false, ... } ✅ 首次有效
first$.next('one'); // 无新发射（first 未变，second 仍为 false）
second$.next(false); // 无新发射（组合值同上一次）❌ 被过滤
second$.next(true); // → 发射: { key: 'one', enabled: true, ... } ✅ 值已变更⚠️ 注意事项：
- 比较函数必须严格返回 true（表示“相等，跳过”）或 false（表示“不等，允许发射”）。切勿返回其他值（如 undefined），否则行为不可预测。
- 若源 Observable 发出 null/undefined，需在比较中显式处理（例如使用 Object.is(prev[0], curr[0]) 替代 === 以支持 NaN 安全比较）。
- distinctUntilChanged 依赖“前一次值”做对比，因此首次发射永远会通过——这正符合需求（无需初始值预设）。
- 如需深度比较（如嵌套对象），应引入 deep-equal 等库，并确保比较函数高效（避免每次发射都执行高开销深比较）。
? 扩展建议：若业务逻辑中“变化”的定义更复杂（例如仅当 second 变化才触发，忽略 first 的变动），可先用 map 提取关键字段再比较：
distinctUntilChanged( (prev, curr) => prev.enabled === curr.enabled )
总之，combineLatest + distinctUntilChanged 的组合，是 RxJS 中实现“智能去重合并”的标准范式。合理运用它，能显著提升流的语义清晰度与运行效率。
