RxJS 操作符的使用总结

什么是 RxJS？

RxJS 是一个能够轻松创建异步和基于事件的程序的编程库，它使用可观察的序列来管理事件和异步数据流。RxJS 可用于各种应用程序类型，包括 web、桌面和移动应用程序。

操作符概述

RxJS 操作符用于对可观察的序列进行转换和处理，帮助我们更加高效地处理数据流。在 RxJS 中，有很多种类的操作符，包括创建操作符、转换操作符、过滤操作符、组合操作符和实用操作符等。

在接下来的内容中，我们将详细介绍 RxJS 各种操作符的使用方式以及示例代码。

创建操作符

创建操作符用于创建新的可观察序列。常用的创建操作符包括 of、from、interval 和 fromEvent 等。

of

of 操作符用于将一系列的值转换成可观察序列。

示例代码：

import { of } from 'rxjs';

const source$ = of(1, 2, 3);
source$.subscribe(value => console.log(value)); // 1 2 3

from

from 操作符用于将数组、Set、Map、字符串等可迭代对象转换成可观察序列。

示例代码：

import { from } from 'rxjs';

const source$ = from([1, 2, 3]);
source$.subscribe(value => console.log(value)); // 1 2 3

interval

interval 操作符用于创建一个每隔一段时间发出值的可观察序列。

示例代码：

import { interval } from 'rxjs';

const source$ = interval(1000);
source$.subscribe(value => console.log(value)); // 0 1 2 3 ...

fromEvent

fromEvent 操作符用于将事件转换成可观察序列。

示例代码：

import { fromEvent } from 'rxjs';

const button = document.getElementById('myButton');
const source$ = fromEvent(button, 'click');
source$.subscribe(event => console.log(event));

转换操作符

转换操作符用于对可观察序列进行转换。常用的转换操作符包括 map、flatMap、switchMap和mergeMap 等。

map

map 操作符用于对可观察序列的每个值进行转换。

示例代码：

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

const source$ = from([1, 2, 3]);
const modified$ = source$.pipe(map(value => value * 2));
modified$.subscribe(value => console.log(value)); // 2 4 6

flatMap

flatMap 操作符用于将可观察序列的每个值转换成另一个可观察序列，并将结果合并成一个可观察序列。

示例代码：

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

const source$ = of(1, 2, 3);
const modified$ = source$.pipe(flatMap(value => of(value * 2)));
modified$.subscribe(value => console.log(value)); // 2 4 6

switchMap

switchMap 操作符用于将可观察序列的每个值转换成另一个可观察序列，并只发出最后一个可观察序列的值。

示例代码：

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

const button = document.getElementById('myButton');
const source$ = fromEvent(button, 'click');
const modified$ = source$.pipe(switchMap(() => interval(1000)));
modified$.subscribe(value => console.log(value)); // 0 1 2 3 ...

mergeMap

mergeMap 操作符用于将可观察序列的每个值转换成另一个可观察序列，并将所有可观察序列的值合并成一个可观察序列。

示例代码：

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

const source$ = of(1, 2, 3);
const modified$ = source$.pipe(mergeMap(value => of(value * 2)));
modified$.subscribe(value => console.log(value)); // 2 4 6 2 4 6

过滤操作符

过滤操作符用于过滤可观察序列中的值。常用的过滤操作符包括 filter 和 debounceTime 等。

filter

filter 操作符用于过滤可观察序列中的值。

示例代码：

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

const source$ = from([1, 2, 3]);
const modified$ = source$.pipe(filter(value => value > 1));
modified$.subscribe(value => console.log(value)); // 2 3

debounceTime

debounceTime 操作符用于将源可观察序列中的值过滤掉，仅仅发出最后一个值。

示例代码：

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

const input = document.getElementById('myInput');
const source$ = fromEvent(input, 'input');
const modified$ = source$.pipe(debounceTime(1000));
modified$.subscribe(value => console.log(value.target.value));

组合操作符

组合操作符用于将多个可观察序列组合成一个可观察序列。常用的组合操作符包括 combineLatest、concat 和 merge 等。

combineLatest

combineLatest 操作符用于组合多个可观察序列的最新值。

示例代码：

// javascriptcn.com 代码示例
import { combineLatest, from, interval } from 'rxjs';

const source1$ = from([1, 2, 3]);
const source2$ = interval(1000);
const combined$ = combineLatest([source1$, source2$]);
combined$.subscribe(([value1, value2]) => console.log(value1, value2)); 
// 3 0
// 3 1
// 3 2
// ...

concat

concat 操作符用于将多个可观察序列串联起来，以顺序发出值。

示例代码：

import { concat, of } from 'rxjs';

const source1$ = of(1, 2, 3);
const source2$ = of(4, 5, 6);
const combined$ = concat(source1$, source2$);
combined$.subscribe(value => console.log(value)); // 1 2 3 4 5 6

merge

merge 操作符用于将多个可观察序列合并成一个可观察序列。

示例代码：

import { interval, merge } from 'rxjs';

const source1$ = interval(1000);
const source2$ = interval(500);
const combined$ = merge(source1$, source2$);
combined$.subscribe(value => console.log(value)); // 0 0 1 1 2 0 1 2 ...

实用操作符

实用操作符用于处理可观察序列的边缘情况。常用的实用操作符包括 tap、finalize 和 catchError 等。

tap

tap 操作符用于在可观察序列中的每个值进行额外的操作，并将原始值传递给下一个处理程序。

示例代码：

// javascriptcn.com 代码示例
import { from } from 'rxjs';
import { tap } from 'rxjs/operators';

const source$ = from([1, 2, 3]);
const modified$ = source$.pipe(tap(value => console.log(`processing ${value}`)));
modified$.subscribe(value => console.log(value));
// processing 1
// 1
// processing 2
// 2
// processing 3
// 3

finalize

finalize 操作符用于在可观察序列完成或出错后执行额外的操作。

示例代码：

// javascriptcn.com 代码示例
import { of } from 'rxjs';
import { finalize } from 'rxjs/operators';

const source$ = of(1, 2, 3);
const modified$ = source$.pipe(finalize(() => console.log('completed')));
modified$.subscribe(value => console.log(value), error => console.log(error), () => console.log('done'));
// 1
// 2
// 3
// completed
// done

catchError

catchError 操作符用于在可观察序列出错后执行额外的操作。

示例代码：

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

const source$ = of(1, 2, 3).pipe(map(value => value.toUpperCase()));
const modified$ = source$.pipe(catchError(error => of('Error occurred')));
modified$.subscribe(value => console.log(value), error => console.log(error));
// ERROR Occurred

总结

RxJS 是一个极其灵活强大的编程库，它提供了丰富的操作符操作，能够让我们更加高效地处理异步数据流。本文介绍了 RxJS 的创建操作符、转换操作符、过滤操作符、组合操作符和实用操作符，并提供了示例代码。希望能够帮助大家更好地理解和应用 RxJS。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654872357d4982a6eb2b5cf8