如何合并两个源自同一Observable且保证同步的数据流？

假设有两个Observable变量，均来自同一个源Observable，且二者会同步更新。以下是简化示例：

const numbers = new BehaviorSubject(1);
const numsPlus = numbers.pipe(map(x => x + 1));
const numsMinus = numbers.pipe(map(x => x - 1));

numbers.next(2);
numbers.next(3);

期望输出 #

合并后需得到如下结果：

[2, 0]
[3, 1]
[4, 2]

combineLatest的问题 #

若直接使用combineLatest，会产生不符合预期的输出：

combineLatest(numsPlus, numsMinus)
    .subscribe(console.log);

实际输出：

[2, 0]
[3, 0]
[3, 1]
[4, 1]
[4, 2]

原因是combineLatest会在任一Observable发射新值时，将两个流的最新值组合输出，导致同一源值更新时触发两次组合结果。

最优方案（无法实施） #

理论上最简洁的方案是直接在源Observable上映射出目标数组：

numbers.pipe(map(x => [x + 1, x - 1]))

但由于这是一个未参与设计的旧系统，修改该方案的复杂度极高，无法直接采用。

可行替代方案 #

使用zip操作符可满足需求，它会严格按照两个Observable的发射顺序，将对应位置的发射值配对组合：

zip(numsPlus, numsMinus)
    .subscribe(console.log);

该代码会输出符合预期的结果：

[2, 0]
[3, 1]
[4, 2]

因为zip会等待两个Observable各自发射第n个值后，才将它们组合输出，完美匹配同一源派生的同步Observable的发射节奏。

内容的提问来源于stack exchange，提问作者Finley Baker