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

RxJS 是一个针对事件处理和异步数据流的 JavaScript 库。它基于观察者模式，提供了一系列的操作符使得对事件进行过滤，转化，统计，合并，分割等等操作变得非常容易。在 RxJS 中，Observable 对象代表了一个数据产生的流。开发者可以通过操作符对这个数据流进行处理并生成新的数据流。本文将介绍 RxJS 中最常用操作符的使用方法。

操作符一：filter

filter 操作符接收一个函数作为参数，对数据流中的每个值进行判断。当函数返回值为 true 时，数据流会把这个值传递下去；否则这个值会被过滤掉。

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

const numObservable = from([1, 2, 3, 4, 5]);
const evenObservable = numObservable
  .pipe(filter(num => num % 2 === 0));

evenObservable.subscribe(val => console.log(val)); // 输出 2, 4

操作符二：map

map 操作符接收一个函数作为参数，会对数据流中的每个值进行转化。转化后的值会被传递到新的数据流中。

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

const numObservable = from([1, 2, 3, 4, 5]);
const doubleObservable = numObservable
  .pipe(map(num => num * 2));

doubleObservable.subscribe(val => console.log(val)); // 输出 2, 4, 6, 8, 10

操作符三：tap

tap 操作符会在每个值通过它之前执行一个函数，并且不会改变原来的值。主要用于调试。

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

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

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

操作符四：take

take 操作符会取得数据流中的前 n 个值。

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

const numObservable = from([1, 2, 3, 4, 5]);
const takeObservable = numObservable
  .pipe(take(2));

takeObservable.subscribe(val => console.log(val)); // 输出 1, 2

操作符五：concat

concat 操作符会将多个数据流按照顺序拼接成一个数据流。只有当上一个数据流完结后才会开始下一个数据流的传递。

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

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

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

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

操作符六：merge

merge 操作符会将多个数据流合并成一个数据流。即使一个数据流没有完结，它也会一直等待传递下去。

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

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

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

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

操作符七：zip

zip 操作符会将多个数据流中相同位置的值打包成一个数组，形成一个新的数据流。只有所有数据流都有值时才会传递下去。

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

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

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

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

操作符八：switchMap

switchMap 操作符将数据流中的每个值转化成一个新的数据流，并用最新的数据流替代当前的数据流。这个替代是即时的，并且不会在原来的数据流中传递。

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

const clickObservable = fromEvent(document, 'click');
const innerObservable = clickObservable
  .pipe(switchMap(() => fromEvent(document.body, 'mousemove')));

innerObservable.subscribe(val => console.log(val)); // 输出鼠标坐标

以上就是 RxJS 最常使用的 8 个操作符的详细介绍和示例代码。通过学习这些操作符，我们可以更加高效的处理和操作异步的数据流，从而提升我们的前端开发能力。

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

RxJS 最常使用的 8 个操作符