RxJS 将 3 个数组合并为一个数组的正确方法，作为 Observable

Question

嗨，我有 3 个主题（它们可以是 Observables）

 const arr1$ = new BehaviorSubject([])
 const arr2$ = new BehaviorSubject([])
 const arr3$ = new BehaviorSubject([])

假设这些主题包含这些数据

arr1 = ['1','2'], 
arr2 = ['3','7'], 
arr3 = ['4']

我想创建一个可观察量（mergedObservable），它结合了这 3 个可观察量的最新值，将它们合并到一个数组中，结果是一个像这样的数组： ['1','2','3','7', ‘4’]

so that I can achieve this 
this.mergedObservable.subscribe( mergedArray => {
     console.log(mergedArray)
})
// ['1','2','3','7','4']

我正在努力解决如何使这个“mergedObservable”。我已经尝试过类似combineLatest(arr1$,arr2$,arr3$)之类的东西，但我仍然需要“链接”更多功能来合并3。

谢谢！

Answer 1

combineLatestproject采用可用于修改组合值的可选函数。

您可以指定一个project函数，用于Array.prototype.reduce将数组展平为单个数组：

const arr1$ = new Rx.BehaviorSubject(['1','2']);
const arr2$ = new Rx.BehaviorSubject(['3','7']);
const arr3$ = new Rx.BehaviorSubject(['4']);

Rx.Observable
  .combineLatest(
    arr1$, arr2$, arr3$,
    (...arrays) => arrays.reduce((acc, array) => [...acc, ...array], [])
  )
  .subscribe(value => console.log(value));

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://unpkg.com/rxjs@5/bundles/Rx.min.js"></script>