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 ))