mergeMap、switchMap、concatMap、exhaustMap の違い

こんにちは、Angular 開発者としての面接では、RxJ 演算子とその違いについていくつかの質問を受けることがあります。

最も一般的な質問の 1 つは 「mergeMap、switchMap、concatMap、exhaustMap の違いは何ですか?」

本題に入り、簡単な言葉で説明しましょう。

簡単な例を 1 つ使用して動作の違いを説明します。

import { interval, take, tap, from } from 'rxjs';
import {
  switchMap,
  mergeMap,
  concatMap,
  exhaustMap,
} from 'rxjs/operators';

const mapOperators = [
  mergeMap,
  switchMap,
  concatMap,
  exhaustMap
];

const selectedMap = mapOperators[0]; // <- Change operator index here

const clicks$ = from(['First Click', 'Second Click', 'Third Click']).pipe(
  tap(console.log),
);

clicks$
  .pipe(
    selectedMap((click: number) =>
      interval(500).pipe(
        tap((intervalValue: number) =>
          console.log(
            `${click} Value: ${intervalValue}`
          )
        ),
        take(3)
      )
    )
  )
  .subscribe();

Stackblitz で実験できるコード例では、ユーザーによる 3 回のクリックの模倣を見ることができます

それでは、各演算子が何を返すかを見てみましょう

マージマップ

First Click
Second Click
Third Click
First Click Value: 0
Second Click Value: 0
Third Click Value: 0
First Click Value: 1
Second Click Value: 1
Third Click Value: 1
First Click Value: 2
Second Click Value: 2
Third Click Value: 2

mergeMap オペレーターはエミッションを並行して実行します。これが、次のように表示される理由です

First Click Value: 0
Second Click Value: 0
Third Click Value: 0

値が 0

スイッチマップ

First Click
Second Click
Third Click
Third Click Value: 0
Third Click Value: 1
Third Click Value: 2

switchMap オペレータは、新たにクリックするたびに前のオペレータをキャンセルします。この場合、ファースト クリック は セカンド クリック によってキャンセルされ、セカンド クリック は次のようになります。 Third Click によってキャンセルされ、結果として Third Click Values
が表示されます。

Third Click Value: 0
Third Click Value: 1
Third Click Value: 2

ConcatMap

First Click
Second Click
Third Click
First Click Value: 0
First Click Value: 1
First Click Value: 2
Second Click Value: 0
Second Click Value: 1
Second Click Value: 2
Third Click Value: 0
Third Click Value: 1
Third Click Value: 2

concatMap オペレーターはすべてのクリックを記憶し、同じ順序で console.log に記録します。この場合、ファースト クリック、セカンド クリック、サード クリック となります。コンソールに表示されます

First Click Value: 0
First Click Value: 1
First Click Value: 2
Second Click Value: 0
Second Click Value: 1
Second Click Value: 2
Third Click Value: 0
Third Click Value: 1
Third Click Value: 2

エキゾーストマップ

First Click
Second Click
Third Click
First Click Value: 0
First Click Value: 1
First Click Value: 2

exhaustMap オペレーターは、ファーストクリックが完了するまでストリームをブロックします。この場合、セカンドクリックとサードクリックは無視されます

First Click Value: 0
First Click Value: 1
First Click Value: 2

これらの演算子の違いを理解したので、間違った演算子を選択した場合の結果を想像できるようになります。

以上がmergeMap、switchMap、concatMap、exhaustMap の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。