【千锋教育前端】每天都在使用的 10 个 RxJS 运算符

以下是前端开发中常用的10个RxJS运算符及其应用场景：

1. map()

作用：转换Observable发出的值。示例：将用户对象流转换为用户名流。

import { map } from 'rxjs/operators';this.userService.getUsers().pipe( map(users => users.map(user => user.name))).subscribe(names => console.log(names));2. filter()

作用：根据条件过滤值。示例：筛选整数流中的偶数。

import { filter } from 'rxjs/operators';import { of } from 'rxjs';of(1, 2, 3, 4, 5, 6).pipe( filter(num => num % 2 === 0)).subscribe(evenNum => console.log(evenNum));3. switchMap()

作用：切换到新的Observable，取消之前的订阅。示例：根据ID流获取用户数据。

import { switchMap } from 'rxjs/operators';this.userId$.pipe( switchMap(userId => this.userService.getUser(userId))).subscribe(user => console.log(user));4. catchError()

作用：处理错误并返回备用Observable。示例：HTTP请求失败时回退到备用数据。

import { catchError } from 'rxjs/operators';this.http.get('/api/data').pipe( catchError(() => this.http.get('/api/fallbackData'))).subscribe(data => console.log(data));5. tap()

作用：执行副作用（如日志）而不修改值。示例：记录Observable发出的值。

import { tap } from 'rxjs/operators';of(1, 2, 3).pipe( tap(value => console.log(`Emitting: ${value}`))).subscribe();6. take()

作用：限制Observable发出的值数量。示例：仅取前3个值。

import { take } from 'rxjs/operators';of(1, 2, 3, 4, 5).pipe( take(3)).subscribe(value => console.log(value)); // 输出: 1, 2, 37. debounceTime()

作用：延迟发射值，忽略高频触发（如输入防抖）。示例：输入框500ms无操作后处理值。

import { debounceTime } from 'rxjs/operators';import { fromEvent } from 'rxjs';fromEvent(input, 'input').pipe( debounceTime(500)).subscribe(event => console.log(input.value));8. distinctUntilChanged()

作用：仅发射与前一个值不同的值。示例：过滤连续重复值。

import { distinctUntilChanged } from 'rxjs/operators';of(1, 2, 2, 3, 3, 3, 4).pipe( distinctUntilChanged()).subscribe(value => console.log(value)); // 输出: 1, 2, 3, 49. merge()

作用：合并多个Observable的值流。示例：合并两个定时器Observable。

import { merge, interval } from 'rxjs';const obs1 = interval(1000);const obs2 = interval(2000);merge(obs1, obs2).subscribe(value => console.log(value));10. combineLatest()

作用：组合多个Observable的最新值。示例：合并两个定时器的最新值。

import { combineLatest, timer } from 'rxjs';import { map } from 'rxjs/operators';const obs1 = timer(0, 1000).pipe(map(x => `${x}秒`));const obs2 = timer(500, 500).pipe(map(x => `${x}半秒`));combineLatest([obs1, obs2]).subscribe(([val1, val2]) => { console.log(`obs1: ${val1}, obs2: ${val2}`);});总结

这些运算符覆盖了前端开发中的常见场景：

数据转换：map、filter
异步控制：switchMap、catchError
性能优化：debounceTime、distinctUntilChanged
多流处理：merge、combineLatest
调试与限制：tap、take

掌握它们能显著提升响应式编程的效率。

您可能感兴趣问答

Collapsible

热门标签

热点问答