1. debounce(防抖)
1.1 描述:
根据一个选择器函数,舍弃掉在两次输出之间小于指定时间的发出值。(在一定时间范围内只要最后一个值)
(使用场景:用户的输入频率不确定)
of([1,2,3].pipe(
debounce(() => timer(1000)); // 发送完最后一次后, 一秒后输出
).subscripe(res => console.log(res))
1.3 debounce的衍生操作符
1.3.1 debounceTime
舍弃掉在两次输出之间小于指定时间的发出值(使用场景:知道用户的输入频率)
fromEvent(input, 'keyup').pipe(
debounceTime(1000) // 舍弃1秒内所有值
)
1.3.2 distinctUntilChanged
只有当 当前值与之前最后一个值不同时才将其发出(默认使用 === 进行比较, 对象引用必须匹配)
of([1,1,2,3,2,2]).pipe(
distinctUntilChanged() // 还可以发出不同对象
)
2. filter
发出符合给定条件的值。(使用场景:与Array的filter一致)
在某些条件下, 可用skip简写
3. first 与 last
发出第一(最后)个值或第一(最后)个通过给定表达式的值。(使用场景:满足某条件时,第一个/最后一个)
of([1,2,3]).pipe(
first(num => num === 1) // 或first()
)
4. single(初始化有用)
发出通过表达式的单一项。该 Observable 发出源 Observable 所发出的值中匹配指定 predicate 函数的单个项。 如果源 Observable 发出多于1个数据项或者没有发出数据项, 分别以 IllegalArgumentException 和 NoSuchElementException 进行通知。
// 若果没匹配上,返回undefined
// 如果在监听流里发出多个Observable会发出错误捕获
// 返回一个 Observable,它判断源 Observable 是否只发出一个与断言匹配的值。
// 如果没有提供断言,那么它将判断 Observable 是否只发出一个值
of('初始化').pipe(
single(str => str === '初始化') // 执行此条件,跳过其他条件
)
range(1,5).pipe(single(x => x === 10)).subscribe(x => console.log(x))
5. skip
跳过N个(由参数提供)发出值 (数据源),某些条件下可当做filter (index)的简写
(使用场景:不需要初始值,比如使用BehaviorSubject)
5.1 skip的衍生操作符
5.1.1 skipUntil
跳过源 observable 发出的值,直到提供的 observable 发出值。(会丢弃源的数据,基于observable )
interval(1000).pipe(
skipUntil(timer(2000)) // 2秒前的跳过,直到发出值,,写条件将会不执行
)
5.1.2 skipWhile
跳过源 observable 发出的值,直到提供的表达式结果为 false ;(不满足表达式往下执行,基于逻辑)
interval(1000).pipe(
skipWhile(val => val<2) // 小于2的值跳过,,结果不为boolean程序挂掉
)
6. take
在完成前发出N个值(N由参数决定) (与skip相反),接受值
(使用场景:想要用户首次的操作数据)
6.1 take的衍生操作符
6.1.1 takeUntil
6.1.2 takeWhile
7. throttle(节流)
以某个时间间隔为阈值,在 durationSelector(持续时间选择器) 完成前将抑制新值的发出
(时间后,不取新)
import { interval } from 'rxjs';
import { throttle, map } from 'rxjs/operators';
// 每1秒发出值
const source = interval(1000);
// 基于 source 自增地增加解析的时间
const promise = val =>
new Promise(resolve =>
setTimeout(() => resolve(`Resolved: ${val}`), val * 100)
);
// 当 promise 解析时发出 source 的项
const example = source.pipe(
throttle(promise),
map(val => `Throttled off Promise: ${val}`)
);
const subscribe = example.subscribe(val => console.log(val));
7.1 throttle的衍生
7.1.1 throttleTime
当指定的持续时间经过后发出最新值。(节流结束前发出的最后一个值将从源 observable 中发出)
(时间前,取新)
*
ignoreElements
sample
当提供的 observable 发出时从源 observable 中取样(间隔一段时间内取得的值)
(使用场景:暂无)
interval(1000).pipe(
sample(interval(2000)) // 2秒取一下值
)