RxJS 中常用的 12 个操作符-JavaScript中文网-JavaScript教程资源分享门户

RxJS 是一款流行的 JavaScript 库，用于处理异步数据流。它提供了丰富的操作符，可以让你更轻松地处理异步数据。本文将介绍 RxJS 中常用的 12 个操作符，让你的代码更简单易懂。

1. map

map 操作符可以将数据流中的每个元素都映射成一个新的元素。它的使用方式类似于 JavaScript 中的 Array.map 方法。

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

of(1, 2, 3).pipe(
  map(x => x * 2)
).subscribe(console.log); // 输出 2, 4, 6

2. filter

filter 操作符可以过滤数据流中的元素。它的使用方式类似于 JavaScript 中的 Array.filter 方法。

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

of(1, 2, 3).pipe(
  filter(x => x % 2 === 0)
).subscribe(console.log); // 输出 2

3. take

take 操作符可以从数据流中取出指定数量的元素。

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

of(1, 2, 3).pipe(
  take(2)
).subscribe(console.log); // 输出 1, 2

4. merge

merge 操作符可以将多个数据流合并成一个数据流。

import { of, interval } from 'rxjs';
import { merge } from 'rxjs/operators';

const first$ = of(1, 2, 3);
const second$ = interval(1000);

merge(first$, second$).subscribe(console.log); // 输出 1, 2, 3, 0, 1, 2, ...

5. concat

concat 操作符可以将多个数据流按顺序连接起来。

-- -------------------- ---- -------
------ - -- - ---- -------
------ - ------ - ---- -----------------

----- ------ - ----- -- ---
----- ------- - ----- -- ---

------------
  ---------------
------------------------- -- -- -- -- -- -- -- -展开代码

6. zip

zip 操作符可以将多个数据流中的元素一一对应地合并起来。

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

const first$ = of(1, 2, 3);
const second$ = of('a', 'b', 'c');

zip(first$, second$).subscribe(console.log); // 输出 [1, 'a'], [2, 'b'], [3, 'c']

7. switchMap

switchMap 操作符可以将数据流中的元素映射成一个新的数据流，并自动取消之前的数据流。

import { fromEvent } from 'rxjs';
import { switchMap } from 'rxjs/operators';

fromEvent(document, 'click').pipe(
  switchMap(() => fromEvent(document, 'mousemove'))
).subscribe(console.log); // 输出鼠标移动事件

8. debounceTime

debounceTime 操作符可以在一定时间内忽略掉数据流中的元素，只取最后一个元素。

import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

fromEvent(document, 'input').pipe(
  debounceTime(500)
).subscribe(console.log); // 输出最后一次输入的值

9. distinctUntilChanged

distinctUntilChanged 操作符可以忽略掉数据流中连续重复的元素。

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

of(1, 1, 2, 2, 3, 3).pipe(
  distinctUntilChanged()
).subscribe(console.log); // 输出 1, 2, 3

10. scan

scan 操作符可以将数据流中的元素依次累加起来，并返回一个累加的值。

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

of(1, 2, 3).pipe(
  scan((acc, x) => acc + x, 0)
).subscribe(console.log); // 输出 1, 3, 6

11. catchError

catchError 操作符可以捕获数据流中的错误，并返回一个备用的数据流。

-- -------------------- ---- -------
------ - --- ---------- - ---- -------
------ - ---------- - ---- -----------------

----- -- --------
  ------ -- -
    ----- --- --------------
  ---
  ------------- -- ------------
------------------------- -- -- -------展开代码

12. tap

tap 操作符可以在数据流中的元素上执行一个副作用，不影响数据流的值。

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

of(1, 2, 3).pipe(
  tap(console.log)
).subscribe(); // 输出 1, 2, 3

总结

本文介绍了 RxJS 中常用的 12 个操作符，它们可以让你更轻松地处理异步数据。如果你想深入学习 RxJS，建议阅读官方文档。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/660e63f3d10417a222ee8cc6

RxJS 中常用的 12 个操作符