rxjs 中的 flatMap、mergeMap、switchMap 和 concatMap？

Question

有人，请解释一下 SwitchMap 和 FlatMap 在 Javascript 方面的区别（从角度来看，rxjs 5）

在我的理解中。

SwitchMap 仅发出最新的可观察值并取消先前的可观察值。

flatMap 收集所有单独的 observable 并在一个数组中返回所有 observable，而不关心 observable 的顺序。异步工作。

concatMap 保留顺序并发出所有可观察值，同步工作

那正确吗？

mergeMap 与上面的工作方式有何不同？

有人，请举例说明。

原文由 diEcho 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

从 以前的答案 中获取：

• flatMap/mergeMap - 立即为任何源项目创建一个 Observable，所有以前的 Observable 都保持活动状态。注意 flatMap 是 --- 的别名，而 mergeMap flatMap 将在 RxJS 8 中删除。
• concatMap - 在创建下一个 Observable 之前等待前一个 Observable 完成
• switchMap - 对于任何源项，完成前一个 Observable 并立即创建下一个
• exhaustMap - 在前一个 Observable 未完成时忽略源项

下面是一个示例，说明当源是直接项 (0,1,2,3,4) 并且 map 函数创建一个将每个项延迟 500 毫秒的 Observable 时每个运算符的行为：

 const { mergeMap, flatMap, concatMap, switchMap, exhaustMap } = Rx.operators;

const example = operator => () =>
  Rx.Observable.from([0,1,2,3,4])
  .pipe(
    operator(x => Rx.Observable.of(x).delay(500))
  )
  .subscribe(console.log, () => {}, () => console.log(`${operator.name} completed`));

const mm = example(mergeMap);
const fm = example(flatMap);
const cm = example(concatMap);
const sm = example(switchMap);
const em = example(exhaustMap);

 .examples > div {
  cursor: pointer;
  background-color: #4CAF50;
  color: white;
  padding: 7px 16px;
  display: inline-block;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.8/Rx.js"></script>

<div class='examples'>
  <div onClick='mm()'>mergeMap </div>
  <div onClick='fm()'>flatMap</div>
  <div onClick='cm()'>concatMap</div>
  <div onClick='sm()'>switchMap</div>
  <div onClick='em()'>exhaustMap</div>
</div>

原文由 ZahiC 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在下面的弹珠图中，在 5ms 、 10ms 、 20ms 发射的源流将 *映射 到 timer(0, 3) ，限于 3 次发射：

在这里玩这个大理石图： “mergeMap vs exhaustMap vs switchMap vs concatMap”

已经有了所有这些很棒的答案，我想添加一个更直观的解释

希望它能帮助别人

原文由 kos 发布，翻译遵循 CC BY-SA 4.0 许可协议