rxjs5.X系列 —— filter系列 api 笔记
欢迎指导与讨论 :)
前言
本文是笔者翻译 RxJS 5.X 官网各类operation操作系列的的第二篇 —— filter过滤。如有错漏,希望大家指出提醒O(∩_∩)O。更详细的资料尽在rxjs官网 【http://reactivex.io/rxjs/manual/overview.htm】与带有demo例子的网站【http://xgrommx.github.io/rx-book/content/observable】。
本文有关filter操作的内容有:debounce、debounceTime、distinct、distinctKey、distinctUntilChanged、distinctUntilKeyChanged、elementAt、filter、first、ignoreElements、audit、auditTime、last、sample、sampleTime、single、skip、skipUntil、skipWhile、take、takeLast、takeUntil、takeWhile、throttle、throttleTime
一、debounce
防抖动,只有当另一个Observable发射值时,才取源Obervable的最新数据进行发射,其他数据取消发射。
// 每次点击,且当计时器的最新值未被发射时,才从计时器发射一个值
Rx.Observable.interval( 1000 )
.debounce(( ) => Rx.Observable.fromEvent(document, 'click'))
.subscribe(x => console.log( x ));
二、debounceTime
防抖动,一段时间内,只取最新数据进行发射,其他数据取消发射。
// 每隔一秒,输出一个计时器的值
Rx.Observable.interval( 1000 )
.debounceTime( 500 )
.subscribe(x => console.log( x ));
三、distinct
去除重复的值。
// 去除重复的值,输出A,B,C,b
Rx.Observable.of('A', 'B', 'C', 'A', 'b', 'B')
.distinct( )
.subscribe( x => console.log( x ))
四、distinctUntilChanged
去除连续重复的值
// 去除连续重复的元素,输出A,B,A,B,A
Rx.Observable.of('A', 'B', 'B', 'A', 'B', 'A', 'A')
.distinctUntilChanged( )
.subscribe( x => console.log( x ))
五、distinctKeyUntilChanged
去除连续项中,拥有相同给予key值的value的项(有点拗口..请看例子)
let items = [
{ age: 4, name: 'Foo'},
{ age: 7, name: 'Bar'},
{ age: 5, name: 'Foo'},
{ age: 6, name: 'Foo'}
]
Rx.Observable.of( ...items )
.distinctUntilKeyChanged('name')
.subscribe( x => console.log( x ))
// 输出
// { age: 4, name: 'Foo'}
// { age: 7, name: 'Bar'}
// { age: 5, name: 'Foo'}
六、ElementAt
只发射指定位置的元素
// 下标从0开始,输出 ‘A’
Rx.Observable.of('A', 'B', 'B', 'A', 'B', 'A', 'A')
.elementAt( 3 )
.subscribe( x => console.log( x ))
七、Filter
自定义过滤规则,符合才把该值进行发射
// 输出奇数:1,2,5,7,9,1
Rx.Observable.of(1,3,2,5,4,7,6,9,1)
.filter( x => x % 2 !== 0 )
.subscribe( x => console.log( x ))
八、First
只输出第一个元素
// 只输出第一个元素,输出:1
Rx.Observable.of(1,3,2,5,4,7,6,9,1)
.first( )
.subscribe( x => console.log( x ))
九、ignoreElement
忽略所有值,一个也不发射
// 啥也不输出
Rx.Observable.of(1,3,2,5,4,7,6,9,1)
.ignoreElements( )
.subscribe( x => console.log( x ))
十、audit、auditTime
audit:当另一个Observable发射值前,源Observable的值会被忽略,当另一个Observable发射值时,才从源Observable发射一个最新值,然后重复上述过程。
auditTime:在指定等待时间内,源Observable的值会被忽略,等待结束后,发射一个源Observable的最新值,然后重复上述过程。
他们与throttle的区别是,第一个值的发射,是先等待再发射,而throttle是先发射第一个值,然后再等待。
// auditTime
// 输出2,5,8,11,13...
Rx.Observable.interval( 1000 )
.auditTime( 2000 )
.subscribe( x => console.log( x ))
十一、last
返回源数据集的最后一个条目
// 返回最后一个条目,输出:5
Rx.Observable.of(1,2,3,4,5)
.last( )
.subscribe( x => console.log( x ))
十二、sample
当另一个Observable发射值时,才从源Observable数据集发射一个最新值。
// 每次点击输出一个计时器的最新值
Rx.Observable.interval( 1000 )
.sample( Rx.Observable.fromEvent( document, 'click' ))
.subscribe( x => console.log( x ))
十三、sampleTime
每隔一定的时间间隔,发射一个源Observable数据集的最新值。
// 每隔2秒,分别输出 0,2,4,6,8....
Rx.Observable.interval( 1000 )
.sampleTime( 2000 )
.subscribe( x => console.log( x ))
十四、single
若源Observable数据集只有一个数据项,则输出该项。若多于一个数据项,则报错
// 输出 1
Rx.Observable.of( 1 )
.single( )
.subscribe( x => console.log( x ))
十五、skip
跳过源Observable数据集的n个数据,然后才发射值。
// 跳过开头2个,输出3,4
Rx.Observable.of(1,2,3,4)
.skip( 2 )
.subscribe( x => console.log( x ))
十六、skipUntil
忽略源Observable开头的一系列值,直到当另一个Observable开始发射值,才会从源Observable开始发射值
// 3秒后,才每秒发射计时器的值,输出:2,3,4,5,6.....
Rx.Observable.interval( 1000 )
.skipUntil( Rx.Observable.of( 1 ).delay( 3000 ))
.subscribe( x => console.log( x ))
十七、skipWhile
忽略源Observable开头的一系列值,直到有一项符合条件,才开始从源Observable的该值开始,开始发射值。
// 输出4,5,3,2,1
Rx.Observable.of( 1, 2, 3, 4, 5, 3, 2, 1)
.skipWhile( x => x < 4 )
.subscribe( x => console.log( x ))
十八、take
从源Obervable的开头开始,拿到n个数据项进行发射,其余的数据项将被忽略。
// 每秒输出:0,1,2 后结束
Rx.Observable.interval( 1000 )
.take( 3 )
.subscribe( x => console.log( x ))
十九、takeLast
从源Obervable的倒数第一个向前数,拿到n个数据项并进行发射,从开头开始的的数据项将被忽略。
// 输出5,6,7
Rx.Observable.of( 1,2,3,4,5,6,7 )
.takeLast( 3 )
.subscribe( x => console.log( x ))
二十、takeUtil
从源Observable数据集的第一项开始进行发射,直到另一个Observable开始发射第一个值时,源Observable停止发射值。
// 3秒后停止计时器的值输出
Rx.Observable.interval( 1000 )
.takeUntil( Rx.Observable.of( 1 ).delay( 3000 ))
.subscribe( x => console.log( x ))
二十一、takeWhile
从源Observable数据集的第一个数据项开始发射值,直到遇到符合条件的第一个数据项后,停止源Observable数据集的发射
// 输出:1,2,3
Rx.Observable.of( 1,2,3,4,3,2,1)
.takeWhile( x => x < 4 )
.subscribe( x => console.log( x ))
二十二、throttle
每当源Observable数据集发射一个数据项时,会等待另一个Observable发射值,在等待期间源Observable的值将被忽略并不会发射,直到另一个Observable发射了一个值时,才把源Observable的最新值进行发射
// 输出0,3,6,9,12.....
// 每次输出一个值,至少等待两秒后,才输出最新值
Rx.Observable.interval( 1000 )
.throttle( x => Rx.Observable.interval( 2000 ))
.subscribe( x => console.log( x ))
二十三、throttleTime
每当源Observable数据集发射一个数据项时,会等待n秒,n秒后输出源Observable的最新值。
// 输出0,3,6,9,12..... Rx.Observable.interval( 1000 ) .throttleTime( 2000 ) .subscribe( x => console.log( x ))