【rxjs5.x】filter操作符

rxjs5.x filter操作符api

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

take

用于猎取 Observable 对象发出的前 n 项值,取完后就完毕。

var source = Rx.Observable.interval(1000);
var example = source.take(3);

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});

示例 marble 图:

source : -----0-----1-----2-----3--..
                take(3)
example: -----0-----1-----2|

以上代码运转后,控制台的输出效果:

0
1
2
complete

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 ))
    原文作者:梵鹿
    原文地址: https://segmentfault.com/a/1190000013307221
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞