RxJSオペレーターメモ - 寝て起きて寝て

of

何もせずデータを流す為のもの受け取り側でsubscribeしているときに使う

map

受け取ったデータを加工する時に使う

Observable.pipe(
  map(value => `map: ${value}`
)

filter

大体データ検証の目的で使う下記の場合受け取った文字列が 'test' の場合後ろのストリーム(map)へ流す違った場合は流さない

Observable
      .pipe(
        filter(value => value === 'test'),
        map(value => `filter() matched: ${value}`)
      );

debounceTime

連続してデータが流れてきた時指定した秒数だけ遅延した後に最後のデータを1度だけストリームに流す下記の場合250ms遅延後ストリームに流す

Observable
      .pipe(
        debounceTime(250),
        map(value => `debounceTime(250): ${value}`)
      );

throttleTime

連続する処理を指定した秒数の感覚でストリームに流すこれはwindowのスクロールイベントなどの処理を間引きたいときに使う

Observable
      .pipe(
        throttleTime(250),
        map(value => `throttleTime(250): ${value}`)
      );

distinctUntilChanged

前回と値が違う場合のみストリームを流す同じデータを流したい時に使う

Observable
      .pipe(
        distinctUntilChanged(),
        map(value => `distinctUntilChanged: ${value}`)
      );

switchMap

最初に流れてきたデータ（A）をもとに別のデータ（B）を流す Bが終わる前に元のデータAが流れてきた場合 Bは途中でキャンセル・破棄されて初めから再び実行される

使い方としては最初に流れてきたObservableを別のObservableに切り替えて使いたい時に使える

川から水（value)を持って別の川へ流すイメージ

httpリクエストを中断させる目的で使うこともできる

Observable
      .pipe(
        switchMap(value => {
          return interval(1000).pipe(
            take(5),
            map((index) => `switchMap: ${index} => ${value}`)
          );
        });
      );

skip

指定した回数分処理をスキップするオペレータ意図的にデータを流したくない時に使う

 Observable
      .pipe(
        skip(3),
        map(value => `skip: ${value}`)
      );

take

実行したい回数だけストリームを流すことができるオペレータ下記の場合3回だけ流せそれ以降は実行することができない初めに一度だけ実行したい場合などに使える

let count = 0;

    Observable
      .pipe(
        take(3),
        map(value => `take(${++count}): ${value}`)
      );

finalize

ストリームが流れ切った後に実行することができるオペレータ

下の場合だと 1秒間隔でmapが3回実行された後100ms後にfinalize!と表示される

ストリームが流れ切った後に何かを実行したい場合に使う画面上にloadingを表示させている場合にfinalizeで非表示にする処理を入れる場合などに使用できる

interval(1000)
      .pipe(
        map(index => `finalize(map): ${index + 1}`),
        take(3),
        finalize(() => {
          setTimeout(() => this.add({ message: 'finalize!' }), 100);
        }),
      );

他にも色々あるのでhttps://rxjs-dev.firebaseapp.com/:RxJS見ると良いまた視覚的に処理がどうなっているかわかる https://rxmarbles.com/:RxJS Marbles も参考にする