[解決済み] rxjsのflatMap, mergeMap, switchMap, concatMap?
2023-04-14 14:45:46
質問
どなたか、SwitchMapとFlatMapの違いをJavascriptの観点から説明してください(angular perspective, rxjs 5の場合)。
私の理解では
スイッチマップ は最新の観測値のみを出力し、前の観測値をキャンセルします。
フラットマップ は、個々の観測値をすべて集め、観測値の順序を気にせずに、すべての観測値を一つの配列で返します。 非同期に動作します。
concatMap 順序を保持し、観測可能なすべての値を出力します。
というのは正しいのでしょうか?
どのように mergeMap は上記とどのように違うのでしょうか?
誰か、例を挙げて説明してください。
どのように解決するのですか?
これを 前の回答 :
-
フラットマップ/マージマップ
- は、任意のソースアイテムに対して直ちにObservableを作成し、以前のObservableはすべて維持されます。注意
flatMap
のエイリアスです。mergeMap
とflatMap
は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>
関連
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] callとapplyの違いは何ですか?
-
[解決済み] URLを新しいタブで開く(新しいウィンドウではない)
-
[解決済み] Angular/RxJS `Subscription` からいつ退会すればいいのか?
-
[解決済み】PromiseとObservablesの違いは何ですか?
-
[解決済み] ExtJS 4のイベントハンドリングについて
-
[解決済み] jQueryの$という記号の意味は何ですか?
-
[解決済み] Reactメモを使うべきではない場合とは?
-
[解決済み] Node.jsのES6クラスをrequireで作る
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] <Enter>でjQuery UIダイアログを送信する
-
[解決済み] Google maps API V3 - 同一地点に複数のマーカーを設置する。
-
[解決済み] ExtJS 4のイベントハンドリングについて
-
[解決済み] 文字列が空白であるかどうかをチェックする
-
[解決済み] 無効になっている入力フィールドの値を送信する
-
[解決済み] JavaScriptで文字列を数値に変換する最速の方法は何ですか?
-
[解決済み] Javascript / jQueryでAndroid端末を検出する。
-
[解決済み] JavaScriptでの大文字小文字を区別しない正規表現
-
[解決済み] javascriptで文字列から関数を作成する方法はありますか?
-
[解決済み] JavaScript で `throw` の後に `return` をする必要がありますか?