RxJS 是一个流式编程库，它提供了许多操作符来处理数据流。这些操作符可以分为以下几类：
- 创建操作符
- 转换操作符
- 过滤操作符
- 组合操作符
- 错误处理操作符
- 辅助操作符
创建操作符
创建操作符用于创建一个新的数据流。以下是一些常见的创建操作符：
of
of 操作符用于创建一个数据流，它将一系列的值作为参数，依次发出这些值。
import { of } from 'rxjs';
of(1, 2, 3).subscribe((value) => {
console.log(value); // 1, 2, 3
});from
from 操作符用于将一个数组、类数组、迭代器或者类似数组对象转换成一个数据流。
// javascriptcn.com 代码示例
import { from } from 'rxjs';
from([1, 2, 3]).subscribe((value) => {
console.log(value); // 1, 2, 3
});
from('hello').subscribe((value) => {
console.log(value); // 'h', 'e', 'l', 'l', 'o'
});interval
interval 操作符用于创建一个每隔一段时间发出一个数字的数据流。
import { interval } from 'rxjs';
interval(1000).subscribe((value) => {
console.log(value); // 0, 1, 2, 3, ...
});timer
timer 操作符用于创建一个在指定时间后发出一个值的数据流。
import { timer } from 'rxjs';
timer(2000).subscribe(() => {
console.log('2 seconds passed');
});转换操作符
转换操作符用于对数据流进行转换。以下是一些常见的转换操作符：
map
map 操作符用于将数据流中的每一个值转换成另一个值。
import { from } from 'rxjs';
import { map } from 'rxjs/operators';
from([1, 2, 3])
.pipe(map((value) => value * 2))
.subscribe((value) => {
console.log(value); // 2, 4, 6
});scan
scan 操作符用于对数据流中的每一个值进行累加。
import { from } from 'rxjs';
import { scan } from 'rxjs/operators';
from([1, 2, 3])
.pipe(scan((acc, value) => acc + value, 0))
.subscribe((value) => {
console.log(value); // 1, 3, 6
});switchMap
switchMap 操作符用于将数据流中的一个值转换成另一个数据流，并且只发出最新的数据流中的值。
import { fromEvent } from 'rxjs';
import { switchMap } from 'rxjs/operators';
fromEvent(document, 'click')
.pipe(switchMap(() => interval(1000)))
.subscribe((value) => {
console.log(value); // 0, 1, 2, 3, ...
});过滤操作符
过滤操作符用于从数据流中筛选出符合条件的值。以下是一些常见的过滤操作符：
filter
filter 操作符用于筛选出符合条件的值。
import { from } from 'rxjs';
import { filter } from 'rxjs/operators';
from([1, 2, 3])
.pipe(filter((value) => value % 2 === 0))
.subscribe((value) => {
console.log(value); // 2
});take
take 操作符用于从数据流中取出指定数量的值。
import { interval } from 'rxjs';
import { take } from 'rxjs/operators';
interval(1000)
.pipe(take(3))
.subscribe((value) => {
console.log(value); // 0, 1, 2
});debounceTime
debounceTime 操作符用于在指定时间内只发出最后一个值。
import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
fromEvent(document, 'input')
.pipe(debounceTime(1000))
.subscribe((event) => {
console.log(event.target.value); // 最后一次输入的值
});组合操作符
组合操作符用于将多个数据流进行组合。以下是一些常见的组合操作符：
merge
merge 操作符用于将多个数据流合并成一个数据流。
// javascriptcn.com 代码示例
import { from } from 'rxjs';
import { merge } from 'rxjs/operators';
const stream1 = from([1, 2, 3]);
const stream2 = from([4, 5, 6]);
merge(stream1, stream2).subscribe((value) => {
console.log(value); // 1, 2, 3, 4, 5, 6
});combineLatest
combineLatest 操作符用于将多个数据流的最新值合并成一个值。
// javascriptcn.com 代码示例
import { fromEvent } from 'rxjs';
import { combineLatest } from 'rxjs/operators';
const input1 = fromEvent(document.getElementById('input1'), 'input');
const input2 = fromEvent(document.getElementById('input2'), 'input');
combineLatest(input1, input2).subscribe(([value1, value2]) => {
console.log(value1, value2); // input1 的值和 input2 的值
});zip
zip 操作符用于将多个数据流中的值按照顺序一一对应地合并成一个值。
// javascriptcn.com 代码示例
import { from } from 'rxjs';
import { zip } from 'rxjs/operators';
const stream1 = from([1, 2, 3]);
const stream2 = from([4, 5, 6]);
zip(stream1, stream2).subscribe(([value1, value2]) => {
console.log(value1, value2); // 1, 4, 2, 5, 3, 6
});错误处理操作符
错误处理操作符用于处理数据流中的错误。
catchError
catchError 操作符用于捕获错误并返回一个备用的数据流。
// javascriptcn.com 代码示例
import { from } from 'rxjs';
import { catchError } from 'rxjs/operators';
from([1, 2, 3])
.pipe(
map((value) => {
if (value === 2) {
throw new Error('error');
}
return value;
}),
catchError(() => from([4, 5, 6]))
)
.subscribe((value) => {
console.log(value); // 1, 4, 5, 6
});辅助操作符
辅助操作符用于对数据流进行一些辅助操作。
tap
tap 操作符用于在数据流中插入一些操作，例如打印日志或者调试。
// javascriptcn.com 代码示例
import { from } from 'rxjs';
import { tap } from 'rxjs/operators';
from([1, 2, 3])
.pipe(
tap((value) => console.log(`before map: ${value}`)),
map((value) => value * 2),
tap((value) => console.log(`after map: ${value}`))
)
.subscribe((value) => {
console.log(value); // 2, 4, 6
});finalize
finalize 操作符用于在数据流结束时执行一些操作。
import { from } from 'rxjs';
import { finalize } from 'rxjs/operators';
from([1, 2, 3])
.pipe(finalize(() => console.log('complete')))
.subscribe((value) => {
console.log(value); // 1, 2, 3
});总结
RxJS 提供了许多操作符来处理数据流。这些操作符可以分为创建操作符、转换操作符、过滤操作符、组合操作符、错误处理操作符和辅助操作符。了解这些操作符的用法可以让我们更加高效地处理数据流。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65091aff95b1f8cacd3e5371