如何检测combinedLatest Observable中的新增/移除项变更？

嘿，这个场景我太熟悉了！要解决这个问题，关键就是拿到combinedLatest输出的「上一次结果」和「当前结果」做对比，RxJS里有几个操作符正好能帮你实现这个需求，我给你拆解两种常用的方法：

方法一：用pairwise()直接获取前后值对比 #

pairwise()会把Observable发射的当前值和前一个值打包成数组[prev, current]输出，刚好满足我们对比的需求。不过要注意：pairwise()第一次不会发射值（因为没有前一个值），所以需要用startWith()给一个初始的默认值（比如空数组）。

举个具体的代码例子：

import { combineLatest, startWith } from 'rxjs';
import { pairwise, tap, map } from 'rxjs/operators';

// 假设你的两个长生命周期Observable
const friendList1$ = ...; // 比如从后端订阅的好友列表1
const friendList2$ = ...; // 好友列表2

combineLatest([friendList1$, friendList2$])
  .pipe(
    // 先把两个列表合并成一个（根据你的实际数据结构调整这一步）
    map(([list1, list2]) => [...list1, ...list2]),
    // 给一个初始空数组，确保第一次pairwise能拿到对比基准
    startWith([]),
    // 拿到前后两次的合并结果
    pairwise(),
    tap(([prevCombined, currentCombined]) => {
      // 找出新增项：当前列表有但之前没有的元素
      // 如果你的好友是对象，建议用id对比（比如item.id），比直接includes更可靠
      const newFriends = currentCombined.filter(friend => 
        !prevCombined.some(prevFriend => prevFriend.id === friend.id)
      );

      // 只有当有新增项时才执行log
      if (newFriends.length > 0) {
        console.log('Combined$ ', newFriends);
        // 这里可以加你的新增项处理逻辑
      }

      // 如果你需要处理移除项，也可以用类似逻辑
      const removedFriends = prevCombined.filter(friend => 
        !currentCombined.some(currentFriend => currentFriend.id === friend.id)
      );
      // if (removedFriends.length > 0) { ... }
    })
  )
  .subscribe();

方法二：用scan()累积状态，自定义对比逻辑 #

如果需要更灵活的状态管理（比如同时保存当前结果、新增项、移除项），可以用scan()来累积每次的结果。它有点像RxJS版的"reduce"，能帮你维护一个全局状态：

import { combineLatest } from 'rxjs';
import { scan, tap, map } from 'rxjs/operators';

combineLatest([friendList1$, friendList2$])
  .pipe(
    map(([list1, list2]) => [...list1, ...list2]),
    // scan的第一个参数是累积函数，第二个是初始状态
    scan((acc, currentCombined) => {
      const prevCombined = acc.current;
      // 计算新增和移除项
      const newFriends = currentCombined.filter(friend => 
        !prevCombined.some(prevFriend => prevFriend.id === friend.id)
      );
      const removedFriends = prevCombined.filter(friend => 
        !currentCombined.some(currentFriend => currentFriend.id === friend.id)
      );
      // 返回新的累积状态
      return {
        current: currentCombined,
        newFriends,
        removedFriends
      };
    }, { current: [], newFriends: [], removedFriends: [] }),
    // 只在有新增项时执行log
    tap(({ newFriends }) => {
      if (newFriends.length > 0) {
        console.log('Combined$ ', newFriends);
      }
    })
  )
  .subscribe();

小提醒 #

因为你的Observable是长生命周期的，记得在不需要订阅的时候取消订阅（比如组件销毁时），避免内存泄漏。如果是Angular项目，用async pipe会自动帮你处理订阅和取消。

内容的提问来源于stack exchange，提问作者Jordan Benge