【Rxjs基礎講座】RxJSのMap系メソッドをコーディングしながら具体的にどう違うか考えてみる

            
            import { of } from 'rxjs';
import { map } from 'rxjs/operators';

//👇オブザーバブルストリームを作成
const obs = of(0, 1, 2, 3, 4, 5, 6, 7, 8);
//※なお配列からストリームを作成する場合、fromオペレーターのほうが簡単
//const obs = from([0, 1, 2, 3, 4, 5, 6, 7, 8]);
//※ES6以降ならスプレッド構文を使って配列とofでストリーム作成が可能
//const obs = of(...[0, 1, 2, 3, 4, 5, 6, 7, 8]);

//👇オブザーバブルにパイプからmapオペレーターを仕込む
const add_one = obs.pipe(
    map(x => x+1)
);

//👇ストリームの開始
add_one.subscribe(val => console.log(val));
        

            
            1
2
3
4
5
6
7
8
9
        

            
            import { of } from 'rxjs';
import { map, mergeMap } from 'rxjs/operators';

// Create an Obervable
const base_obs = of(0, 3, 6);
const sub_obs = of(1, 2, 3);

// The first base Observable, base_obs, is overlayed with the second subsidiary
// Observable, sub_obs and then create new 'merged' Observable.
const merged_obs = base_obs.pipe(
    mergeMap(x => sub_obs.pipe(
            map(i => x+i)
        )
    )
);

merged_obs.subscribe(x => console.log(x));
        

            
            1
2
3
4
5
6
7
8
9
        

            
            import { of } from 'rxjs';
import { map, switchMap } from 'rxjs/operators';

// Create an Obervable
const base_obs = of(0, 3, 6);
const sub_obs = of(1, 2, 3);

// The first base Observable, base_obs, is overlayed with the second subsidiary
// Observable, sub_obs and then create new 'switched' Observable.
const switched_obs = base_obs.pipe(
    switchMap(x => sub_obs.pipe(
            map(i => x+i)
        )
    )
);

switched_obs.subscribe(x => console.log(x));
        

            
            1
2
3
4
5
6
7
8
9
        

            
            import { of } from 'rxjs';
import { map, concatMap } from 'rxjs/operators';

// Create an Obervable
const base_obs = of(0, 3, 6);
const sub_obs = of(1, 2, 3);

// The first base Observable, base_obs, is overlayed with the second subsidiary
// Observable, sub_obs and then create new 'concatenated' Observable.
const concat_obs = base_obs.pipe(
    concatMap(x => sub_obs.pipe(
            map(i => x+i)
        )
    )
);

concat_obs.subscribe(x => console.log(x));
        

            
            1
2
3
4
5
6
7
8
9
        

            
            import { of, interval } from 'rxjs';
import { map, mergeMap, zip } from 'rxjs/operators';

const base_obs = of(0, 3, 6);
const sub_obs = of(1, 2, 3);

const merged_obs = base_obs.pipe(
    mergeMap(x => sub_obs.pipe(
            map(i => x+i),
            zip(interval(100)) //👈追記。100msおきにsubの要素が流れる
        )
    )
);

merged_obs.subscribe(x => console.log(x));
        

            
            [ 1, 0 ]
[ 4, 0 ]
[ 7, 0 ]
[ 2, 1 ]
[ 5, 1 ]
[ 8, 1 ]
[ 3, 2 ]
[ 6, 2 ]
[ 9, 2 ]
        

            
            import { of, interval } from 'rxjs';
import { map, switchMap, zip } from 'rxjs/operators';

const base_obs = of(0, 3, 6);
const sub_obs = of(1, 2, 3);

const switched_obs = base_obs.pipe(
    switchMap(x => sub_obs.pipe(
            map(i => x+i),
            zip(interval(100))
        )
    )
);

switched_obs.subscribe(x => console.log(x));
        

            
            [ 7, 0 ]
[ 8, 1 ]
[ 9, 2 ]
        

            
            import { of, interval } from 'rxjs';
import { map, concatMap, zip } from 'rxjs/operators';

const base_obs = of(0, 3, 6);
const sub_obs = of(1, 2, 3);

const concat_obs = base_obs.pipe(
    concatMap(x => sub_obs.pipe(
            map(i => x+i),
            zip(interval(100))
        )
    )
);

concat_obs.subscribe(x => console.log(x));
        

            
            [ 1, 0 ]
[ 2, 1 ]
[ 3, 2 ]
[ 4, 0 ]
[ 5, 1 ]
[ 6, 2 ]
[ 7, 0 ]
[ 8, 1 ]
[ 9, 2 ]
        

            
            - map:
    1つのObservableの処理の中身を変形させたい場合に使いましょう。

- mergeMap:
    ２つ以上のObservableを非同期処理させたい場合に使いましょう。

- switchMap:
    非同期処理したい場合で、一連の処理の過程は重要視されず、
    もっとも新しい処理以外は棄却されても良い場合にはこっちを使いましょう。

- concatMap:
    ２つ以上のObservableで同期処理させたい場合に使いましょう。