map vs concatMap

Question

我一直无法找到这个问题的答案,但是concat地图和地图有什么区别？具体来说,我有一个例子让我很困惑:

const domainsObservable = this.auth.getAuthDomains()
    .shareReplay()
    .concatMap((authDomains) => authDomains.map((domain) => this.toDomain(domain, connectionsObservable)))
    .filter((authDomain) => this.isValidDomain(authDomain))
    .toArray();

这是从服务调用一个方法getAuthDomains(),只返回一个包含3个域的数组.当我使用上面的实现时,我最终得到了一个由4个数组组成的数组,每个数组都有一个包含3个域的数组.不知何故,它使响应中的数据量翻了两番.

然后我切换到以下实现:

const domainsObservable = this.auth.getAuthDomains()
    .shareReplay()
    .map(authDomains => authDomains.map(domain => this.toDomain(domain, connectionsObservable)))
    .map(authDomains => authDomains.filter(domain => this.isValidDomain(domain)));  

这给了我我所需要的 - 一个正确过滤的单个数组.

那么为什么要切换到map显着改变结果呢？我的操作顺序是否重要？

谢谢

Answer 1

简单地说,这两个运营商做了以下事情:

• map() - 将每个值投射到一个不同的值,该值在链中进一步传播:

  .map(v => v * 2)
  

  这基本上是一样的Array.map().

• concatMap() - 将每个值投影到Observable并订阅它.运算符总是仅订阅一个内部Observable,因此如果源Observable更快地发出值,则它们在内部缓冲concatMap():

  .concatMap(v => Observable.of(v * 2))
  

  ...或者通常在Angular中你会做这样的事情:

  .concatMap(v => this.http.get(`whatever/${v}`))
  

但这里有趣的部分.在RxJS 5中,订阅内部Observables(从投影函数返回的Observable等)的运算符实际上期望所谓的"可观察输入".这意味着您可以自由地交换Observables,Promises,Observables类对象......以及JavaScript数组.

在内部,它是使用该subscribeToResult功能实现的.请注意,如果您传递一个数组,它将迭代它并单独发出每个值:https://github.com/ReactiveX/rxjs/blob/master/src/internal/util/subscribeToResult.ts#L17

这意味着您可以使用concatMap()"解包"阵列到单个发射.例如:

Observable.of(42)
  .concatMap(v => [1, 2, 3])
  .subscribe(console.log)

这将打印数字:

1
2
3

另一方面,如果你只使用map它,它将简单地传递数组:

Observable.of(42)
  .map(v => [1, 2, 3])
  .subscribe(console.log)

这将打印数字:

[1,2,3]

因此concatMap,有时只用于解压缩来自Observable源的数组concatMap(array => array),这正是代码中正在发生的事情.

哪一个更好取决于你.通常,它更容易执行像简单的操作map或filter数组对象本身,而不是开箱和处理在Rx链性能的原因上.