1. ホーム
  2. javascript

[解決済み] rxjsのflatMap, mergeMap, switchMap, concatMap?

2023-04-14 14:45:46

質問

どなたか、SwitchMapとFlatMapの違いをJavascriptの観点から説明してください(angular perspective, rxjs 5の場合)。

私の理解では

スイッチマップ は最新の観測値のみを出力し、前の観測値をキャンセルします。

フラットマップ は、個々の観測値をすべて集め、観測値の順序を気にせずに、すべての観測値を一つの配列で返します。 非同期に動作します。

concatMap 順序を保持し、観測可能なすべての値を出力します。

というのは正しいのでしょうか?

どのように mergeMap は上記とどのように違うのでしょうか?

誰か、例を挙げて説明してください。

どのように解決するのですか?

これを 前の回答 :

  • フラットマップ/マージマップ - は、任意のソースアイテムに対して直ちにObservableを作成し、以前のObservableはすべて維持されます。注意 flatMap のエイリアスです。 mergeMapflatMap はRxJS 8で削除されます。
  • concatMap - 前のObservableが完了するのを待ってから、次のObservableを作成する。
  • スイッチマップ - 任意のソースアイテムに対して、前のObservableを完了させ、すぐに次のものを作成します。
  • exhaustMap - 前のObservableが完了していない間、ソースアイテムは無視されます。

ソースが即時のアイテム(0,1,2,3,4)で、map関数が各アイテムを500ms遅延させる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>