资讯专栏INFORMATION COLUMN

【rxjs5.x】filter操作符

Forelax / 3003人阅读

摘要:操作符防抖动,只有当另一个发射值时,才取源的最新数据进行发射,其他数据取消发射。输出从源数据集的第一项开始进行发射,直到另一个开始发射第一个值时,源停止发射值。

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://www.ucloud.cn/yun/107505.html

相关文章

  • rxjs5.x】Transformation作符

    摘要:对对象发出的每个值,使用指定的函数,进行映射处理。示例图以上代码运行后,控制台的输出结果缓冲源对象已发出的值,直到大小达到给定的最大。该操作符也会先处理前一个对象,在处理下一个对象。 map 对 Observable 对象发出的每个值,使用指定的 project 函数,进行映射处理。 var source = Rx.Observable.interval(1000); var newe...

    isaced 评论0 收藏0
  • Java 8 Strem基本操作

    摘要:可以使用方法替换常规循环以上代码的产出所有这些原始流都像常规对象流一样工作,但有以下不同之处原始流使用专门的表达式,例如代替或代替。原始流支持额外的终端聚合操作,以上代码的产出有时将常规对象流转换为基本流是有用的,反之亦然。 本文提供了有关Java 8 Stream的深入概述。当我第一次读到的Stream API,我感到很困惑,因为它听起来类似Java I/O的InputStream,...

    Jensen 评论0 收藏0
  • MongoDB via C#

    摘要:对于查询的结果还可以进行进一步的操作。相当于筛选条件,条件之间可是进行组合。除了基本的,另外还有对于数组的等,对于时间有等。闲时更新如有错误,多谢指正 安装 首先需要安装 MongoDB.Driver 包 nuget 首先的首先,需要安装好 Mongo 数据库 下载Mongo 配置好数据库,构建好连接字符串就可以继续使用了 连接字符串 ! mongodb 默认是没有用户名和密...

    zacklee 评论0 收藏0
  • Java 8 数据流教程

    摘要:数据流教程原文译者飞龙协议这个示例驱动的教程是数据流的深入总结。但是的数据流是完全不同的东西。数据流是单体,并且在函数式编程中起到重要作用。列表上的所有流式操作请见数据流的。基本的数据流使用特殊的表达式,例如,而不是,而不是。 Java 8 数据流教程 原文:Java 8 Stream Tutorial 译者:飞龙 协议:CC BY-NC-SA 4.0 这个示例驱动的教程是J...

    XUI 评论0 收藏0
  • 乐字节-Java8新特性之Stream流(下)

    摘要:归约操作计算有效订单总金额有效订单总金额收集数据收集将流转换为其他形式,方法作为终端操作,接收一个接口的实现,用于给中元素做汇总的方法。 接上一篇:《Java8新特性之stream》,下面继续接着讲Stream 5、流的中间操作 常见的流的中间操作,归为以下三大类:筛选和切片流操作、元素映射操作、元素排序操作:showImg(https://segmentfault.com/img/b...

    20171112 评论0 收藏0

发表评论

0条评论

Forelax

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<