在 RxJS 中，有三种常用的操作符：concat、merge 和 combineLatest。这三种操作符都可以用于将多个 Observable 序列合并成一个，但它们之间存在一些区别和应用场景。
concat 操作符
concat 操作符用于将多个 Observable 序列按顺序合并成一个，即等待前一个 Observable 完成后再订阅下一个 Observable。它的语法如下：
concat<T>(...observables: (ObservableInput<T> | SchedulerLike)[]): Observable<T>
其中，observables 参数表示要合并的 Observable 序列，可以传入多个 Observable 实例或 Observable 工厂函数。例如：
-- -------------------- ---- ------- ------ - --- ------ - ---- ------- ----- -------- - ----- -- --- ----- -------- - ----- -- --- ----- -------- - ----- -- --- ----- ------- - ---------------- --------- ---------- ------------------------------- -- ---- - - - - - - - -
在上面的示例中，concat 操作符将三个 Observable 序列 source1$、source2$ 和 source3$ 按顺序合并成一个新的 Observable 序列 result$，并最终输出所有的值。
需要注意的是，concat 操作符只有在前一个 Observable 完成后才会订阅下一个 Observable，因此如果前一个 Observable 没有完成，后面的 Observable 就不会被订阅。这也是 concat 操作符与 merge 操作符的主要区别。
merge 操作符
merge 操作符用于将多个 Observable 序列合并成一个，即同时订阅所有的 Observable，并将它们的值合并到一个新的 Observable 序列中。它的语法如下：
merge<T>(...observables: (ObservableInput<T> | number | SchedulerLike)[]): Observable<T>
其中，observables 参数表示要合并的 Observable 序列，可以传入多个 Observable 实例或 Observable 工厂函数。例如：
-- -------------------- ---- ------- ------ - --- ----- - ---- ------- ----- -------- - ----- -- --- ----- -------- - ----- -- --- ----- -------- - ----- -- --- ----- ------- - --------------- --------- ---------- ------------------------------- -- ---- - - - - - - - -
在上面的示例中，merge 操作符将三个 Observable 序列 source1$、source2$ 和 source3$ 合并成一个新的 Observable 序列 result$，并最终输出所有的值。需要注意的是，merge 操作符会同时订阅所有的 Observable，因此在任何一个 Observable 发出值时，都会立即将其合并到新的 Observable 序列中。
combineLatest 操作符
combineLatest 操作符用于将多个 Observable 序列合并成一个，即同时订阅所有的 Observable，并将它们的最新值合并到一个新的 Observable 序列中。它的语法如下：
combineLatest<T, R>(...inputs: (ObservableInput<any> | ((...values: Array<any>) => R))[]): Observable<R>
其中，inputs 参数表示要合并的 Observable 序列和一个可选的转换函数，可以传入多个 Observable 实例或 Observable 工厂函数。例如：
-- -------------------- ---- ------- ------ - --- ------------- - ---- ------- ----- -------- - ----- -- --- ----- -------- - ------- ---- ----- ----- ------- - ------------------------ ---------- --- -- -- ------------ ------------------------------- -- ----- -- -- -- --
在上面的示例中，combineLatest 操作符将两个 Observable 序列 source1$ 和 source2$ 合并成一个新的 Observable 序列 result$，并最终输出所有的值。需要注意的是，combineLatest 操作符会同时订阅所有的 Observable，并在任何一个 Observable 发出新值时，将所有 Observable 的最新值合并到新的 Observable 序列中。
应用场景
在实际应用中，concat、merge 和 combineLatest 操作符都有各自的应用场景。下面是一些常见的应用场景：
- concat 操作符适用于需要按顺序执行多个异步操作的场景，比如在获取数据时需要先获取第一部分数据，再获取第二部分数据。
- merge 操作符适用于需要同时执行多个异步操作的场景，比如在页面加载时需要同时获取多个资源。
- combineLatest 操作符适用于需要根据多个输入值计算输出值的场景，比如在搜索框中输入关键字时需要同时查询多个数据源。
总结
在 RxJS 中，concat、merge 和 combineLatest 操作符都可以用于将多个 Observable 序列合并成一个，但它们之间存在一些区别和应用场景。需要根据具体的业务场景选择合适的操作符，以达到最优的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e1335b1886fbafa4e3b83c