RxJSを使った配列のフィルタリング

今回はRxJSを使って配列の要素をフィルタリングする方法をご紹介します。
RxJSのバージョンは6.xを対象としています。

はじめに

今回フィルタリングする配列はこちら

// フィルタリングする配列
const items = [1, 2, 3, 4, 5, 6, 7, 8];

この中から偶数の要素だけ抽出して配列を生成します。

手順

手順は以下の通りです。

1. fromを使って配列をObservableに変換。
2. filterで偶数の要素のみストリームに流す。
3. toArrayで流れてきたデータを配列にまとめる。

サンプルコード

import { from } from 'rxjs';
import { filter, toArray } from 'rxjs/operators'

// フィルタリングする配列
const items = [1, 2, 3, 4, 5, 6, 7, 8];

// 配列をObservableに変換
from(items).pipe(
  // 偶数の要素のみ流す
  filter(item => item % 2 === 0),
  // 流れてきたデータを配列にまとめる
  toArray()
).subscribe(
  value => console.log(value)
);

出力結果

// 出力結果
[2, 4, 6, 8]