これらの xJS オペレーターで Angular の可能性を最大限に引き出します-jsチュートリアル-php.cn

Unlock Angular

(今まで必要とは知らなかった) 5 つの RxJS オペレーター

リアクティブプログラミングは、JavaScript での非同期データの処理方法を変革しました。 RxJS (Reactive Extensions for JavaScript) は、データストリームの操作を簡単にする強力なライブラリです。 Map、filter、mergeMap などの演算子が一般的に使用されますが、RxJS には複雑なロジックを簡素化できる隠れた機能が数多くあります。このガイドでは、5 つのあまり知られていない RxJS 演算子を紹介し、それらの使用例と実装方法を段階的に説明します。

RxJS オペレーターとは何ですか?

RxJS オペレーターは、さまざまな方法でオブザーバブルを変換、フィルター、または結合できるようにする関数です。これらにより、非同期ストリームの処理がより宣言的かつ直感的になります。演算子を連鎖させることで、堅牢で反応的なワークフローを構築できます。

あまり知られていない演算子を使用する理由

RxJS の一部の演算子は、非常に特殊な問題を解決したり、コードの可読性とパフォーマンスを向上させたりします。これらの隠れた宝石を学ぶと、コードをより効率的かつエレガントにすることができます。

1. パーティション: ストリームの分割

パーティションとは何ですか?

パーティション演算子は、述語に基づいて 1 つのオブザーバブルを 2 つのオブザーバブルに分割するために使用されます。 1 つのオブザーバブルは述語を満たす値を出力し、もう 1 つは残りの値を出力します。

いつ使用するか?

エラーのフィルタリングや偶数と奇数の分離など、異なる種類のデータを別々のストリームで処理する必要がある場合は、パーティションを使用します。

例: 偶数と奇数の分割

ステップ 1: 必要な RxJS オペレーターをインポートする

import { from } from 'rxjs';
import { partition } from 'rxjs/operators';

ログイン後にコピー

ステップ 2: Observable を作成する

const numbers$ = from([1, 2, 3, 4, 5, 6, 7, 8, 9]);

ログイン後にコピー

ステップ 3: パーティションを使用する

const [even$, odd$] = partition(numbers$, (num) => num % 2 === 0);

ログイン後にコピー

ステップ 4: 両方のストリームを購読する

even$.subscribe((num) => console.log(`Even: ${num}`));
odd$.subscribe((num) => console.log(`Odd: ${num}`));

ログイン後にコピー

出力

Even: 2  
Even: 4  
Even: 6  
Even: 8  
Odd: 1  
Odd: 3  
Odd: 5  
Odd: 7  
Odd: 9

ログイン後にコピー

重要なポイント

partition を使用すると、複数のフィルター演算子が必要となるロジックが簡素化されます。

2.combinelateWith: 最新の値を結合する

combinlatestWith とは何ですか?

この演算子は、複数のオブザーバブルの最新の値を 1 つのオブザーバブルに結合します。

いつ使用するか?

ユーザー入力とリアルタイムデータを組み合わせるなど、複数のストリームの変更に同時に対応する必要がある場合は、combinelateWith を使用します。

例: ユーザー入力と API データの結合

ステップ 1: 必要な RxJS オペレーターをインポートする

import { from } from 'rxjs';
import { partition } from 'rxjs/operators';

ログイン後にコピー

ステップ 2: オブザーバブルの作成

const numbers$ = from([1, 2, 3, 4, 5, 6, 7, 8, 9]);

ログイン後にコピー

ステップ 3: ストリームを結合する

const [even$, odd$] = partition(numbers$, (num) => num % 2 === 0);

ログイン後にコピー

出力

even$.subscribe((num) => console.log(`Even: ${num}`));
odd$.subscribe((num) => console.log(`Odd: ${num}`));

ログイン後にコピー

重要なポイント

combinelatestWith は、複数のストリームをリアルタイムで同期するのに最適です。

3.監査: 正確なスロットル

監査とは何ですか?

監査オペレーターは、指定された期間の後に監視可能なソースから最新の値を出力します。

いつ使用するか?

ドラッグアンドドロップイベントやスクロール中など、排出を制御したい場合は、監査を使用します。

例: スクロールイベントの発行

ステップ 1: 必要な RxJS オペレーターをインポートする

Even: 2  
Even: 4  
Even: 6  
Even: 8  
Odd: 1  
Odd: 3  
Odd: 5  
Odd: 7  
Odd: 9

ログイン後にコピー

ステップ 2: スクロールオブザーバブルを作成する

import { fromEvent, of } from 'rxjs';
import { combineLatestWith } from 'rxjs/operators';

ログイン後にコピー

ステップ 3: 監査を適用する

const input$ = fromEvent(document.getElementById('input'), 'input');
const apiData$ = of({ name: 'John Doe', age: 30 });

ログイン後にコピー

出力

input$
  .pipe(combineLatestWith(apiData$))
  .subscribe(([event, data]) => {
    console.log(`Input: ${event.target.value}, API Data: ${JSON.stringify(data)}`);
  });

ログイン後にコピー

重要なポイント

監査により、最新の値を失うことなく正確なスロットリングが保証されます。

4.展開: 再帰的オブザーバブル

拡張とは何ですか?

expand オペレーターは、放出された各値を新しいオブザーバブルに再帰的に投影します。

いつ使用するか?

再帰的な API 呼び出しやツリーの走査などのシナリオには、expand を使用します。

例: ページ分割されたデータの取得

ステップ 1: 必要な RxJS オペレーターをインポートする

Input: Hello, API Data: {"name":"John Doe","age":30}

ログイン後にコピー

ステップ 2: API 呼び出しをシミュレートする

import { fromEvent, interval } from 'rxjs';
import { audit } from 'rxjs/operators';

ログイン後にコピー

ステップ 3: 展開を使用する

const scroll$ = fromEvent(window, 'scroll');

ログイン後にコピー

出力

scroll$
  .pipe(audit(() => interval(1000)))
  .subscribe(() => console.log('Scrolled!'));

ログイン後にコピー

重要なポイント

expand は、再帰操作をエレガントに処理するのに最適です。

5. groupBy: ストリームの整理

groupByとは何ですか?

groupBy 演算子は、オブザーバブルを複数のオブザーバブルに分割し、指定されたキーでグループ化します。

いつ使用するか?

重大度別にログを整理するなど、データを動的に分類する必要がある場合は、groupBy を使用します。

例: ログのグループ化

ステップ 1: 必要な RxJS オペレーターをインポートする

Scrolled!  
Scrolled!

ログイン後にコピー

ステップ 2: 監視可能なログを作成する

import { of } from 'rxjs';
import { expand, take } from 'rxjs/operators';

ログイン後にコピー

ステップ 3: groupBy を使用する

const fetchPage = (page) => of(`Page ${page}`);

ログイン後にコピー

出力

fetchPage(1)
  .pipe(
    expand((page) => (page < 5 ? fetchPage(page + 1) : of())),
    take(5)
  )
  .subscribe((data) => console.log(data));

ログイン後にコピー

重要なポイント

groupBy は、データをカテゴリ別に動的に整理することを簡素化します。

よくある質問

最も一般的な RxJS 演算子は何ですか?

map、filter、mergeMap などの演算子は、データストリームの変換とフィルタリングに広く使用されています。

適切なオペレーターを選択するにはどうすればよいですか?

データフローの要件に基づいて演算子を選択します。分割にはpartitionを使用し、同期にはcombinelateWithを、分類にはgroupByを使用します。

これらの演算子を組み合わせることはできますか?

はい、これらの演算子を連鎖させて、パーティションと拡張を組み合わせて高度なロジックを実現するなど、複雑なワークフローを構築できます。

これら 5 つの RxJS 演算子を学習すると、よりクリーンで効率的なリアクティブコードを作成できるようになります。これらの例で実験を開始し、Angular アプリケーションがよりダイナミックで強力になるのを見てください!

以上がこれらの xJS オペレーターで Angular の可能性を最大限に引き出しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。