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