如何基于BehaviorSubject生成从首次发射起输出前后值的Observable？

这个问题我刚好碰到过，其实不需要纠结复杂的缓冲算子，两种简单方案就能完美解决你的需求！

方案一：简洁版——startWith() + pairwise() #

你说得对，pairwise()和bufferCount(2,1)确实要等源Observable发射两个值才会输出第一个结果，但我们可以给源Observable先「补一个初始占位值」，让pairwise()第一次就能凑成对。

因为你用的是BehaviorSubject，它本身会在订阅时立即发射当前的初始值，所以我们只需要用startWith(undefined)（或者你需要的默认前值，比如null）给它加一个前置的「空值」，再结合pairwise()，就能实现从第一个事件就输出[前值, 当前值]的效果。

代码示例：

import { BehaviorSubject, pairwise, startWith } from 'rxjs';

// 初始化你的BehaviorSubject
const source$ = new BehaviorSubject({ id: 1, content: '初始值' });

// 构造目标Observable
const withPrevious$ = source$.pipe(
  startWith(undefined), // 补一个前置占位的前值
  pairwise()
);

// 订阅测试
withPrevious$.subscribe(([prev, curr]) => {
  console.log('前值:', prev);
  console.log('当前值:', curr);
  console.log('---');
});

// 模拟后续发射新值
source$.next({ id: 2, content: '更新值1' });
source$.next({ id: 3, content: '更新值2' });

运行后输出：

前值: undefined
当前值: { id: 1, content: '初始值' }
---
前值: { id: 1, content: '初始值' }
当前值: { id: 2, content: '更新值1' }
---
前值: { id: 2, content: '更新值1' }
当前值: { id: 3, content: '更新值2' }
---

方案二：灵活版——使用scan()算子 #

如果你不想依赖startWith()，也可以用scan()算子手动累积前值，这种方式能更灵活地定义前值的初始状态，甚至在累积过程中提前处理数据。

代码示例：

import { BehaviorSubject, scan } from 'rxjs';

const source$ = new BehaviorSubject({ id: 1, content: '初始值' });

const withPrevious$ = source$.pipe(
  // 用scan累积前值，初始状态的prev设为undefined
  scan((previousVal, currentVal) => ({ prev: previousVal, curr: currentVal }), { prev: undefined, curr: undefined })
);

withPrevious$.subscribe(({ prev, curr }) => {
  console.log('前值:', prev);
  console.log('当前值:', curr);
  console.log('---');
});

这个方案的输出和上面完全一致，好处是你可以在scan的回调函数里加入自定义逻辑，比如提前对比前值和当前值、过滤无效数据等。

两种方案都能满足你的需求：startWith()+pairwise()更简洁直观，scan()更适合需要额外逻辑处理的场景，你可以根据自己的业务选择。

内容的提问来源于stack exchange，提问作者Slava Fomin II