如何使用RxJS的combineLatestWith操作符合并3个及以上流？

你的写法虽然能运行，但存在两个明显问题：

1. 数组嵌套导致取值错误：每次链式调用combineLatestWith会把前一次的合并结果作为新数组的第一个元素，实际合并后的结构是[[hello, world], !]，你代码里取arr[2]会得到undefined，最终输出结果不符合预期。
2. 写法冗余：完全没必要多次调用操作符，combineLatestWith本身支持一次性传入多个Observable。

正确的写法 #

combineLatestWith可以直接接受任意数量的Observable作为参数，合并后会将每个流的最新值按传入顺序整理成一维数组，用解构赋值能更直观地处理：

import { of, Observable } from 'rxjs';
import { combineLatestWith, map } from 'rxjs/operators';

const hello$: Observable<string> = of('hello').pipe(
  // 一次性传入所有需要合并的Observable
  combineLatestWith(of('world'), of('!')),
  // 直接解构数组元素
  map(([greeting, subject, punctuation]) => {
    return `${greeting} - ${subject}${punctuation}`;
  })
);

// 订阅测试
hello$.subscribe(console.log); // 输出: hello - world!

额外补充 #

如果需要合并的流是动态生成的（比如存在数组里），还可以使用静态方法combineLatest（注意：被弃用的是实例方法combineLatest，静态方法依然可用）：

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

const streams = [of('hello'), of('world'), of('!')];
const hello$ = combineLatest(streams).pipe(
  map(([greeting, subject, punctuation]) => `${greeting} - ${subject}${punctuation}`)
);

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