如何在RxJS中不使用toArray()实现数组串行处理后返回单数组？

其实我们可以用reduce操作符来替代toArray()的作用，它能帮我们累积处理后的元素，最终输出完整的数组，同时还能保留concatMap的顺序等待特性。

实现代码 #

Observable.of([1, 2, 3, 4]) // 初始数组流
  .concatMap<number[], number[]>(valArr => {
    return Observable.from(valArr) // 拆分数组为单个元素流
      .map<number, number>((num, idx) => {
        return valArr[idx] + 1; // 单个元素处理逻辑：加1
      })
      // 用reduce累积元素，替代toArray()
      .reduce<number[], number>((acc, current) => {
        acc.push(current);
        return acc;
      }, []); // 初始累积值为空数组
  })
  .subscribe(arr => {
    console.log(arr); // 输出：[2,3,4,5]，和原代码结果一致
  });

原理说明 #

1. reduce的作用：它会订阅内部的单个元素流，把每个处理后的元素依次添加到累积数组中，直到内部流完成，然后把最终的累积数组作为结果输出——这和toArray()的核心效果完全一致，但不需要显式调用toArray()。
2. 保留concatMap的特性：concatMap依然会等待内部的from+map+reduce流完全处理完（也就是所有元素都被累积成数组），才会继续处理后续的流（这里初始只有一个数组流，所以就是保证所有元素按顺序处理完再输出结果）。

额外说明 #

如果你的处理逻辑里有异步操作（比如每个元素处理是一个异步请求），concatMap依然会保证顺序执行，reduce也会正确累积所有异步处理后的结果，最终输出完整的数组，和原代码的行为完全匹配。

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