美文网首页让前端飞Web前端之路
rxjs-条件判断类操作符

rxjs-条件判断类操作符

作者: bugWriter_y | 来源:发表于2019-06-26 15:18 被阅读0次

    本章主要关注条件判断类操作符,例如是不是所有数据都满足一个条件,是否为空,如果为空的话返回一个默认值,满足条件的某个数据,这个数据在哪里。

    Rx_Logo-512-512.png

    defaultIfEmpty

    如果外部源没有发射任何数据就结束了,将某一个默认值发射出去

    案例:只取前5秒的点击,如果这5秒内没有数据发射,那么发射一个null出去

    import { takeUntil, defaultIfEmpty } from "rxjs/operators";
    import { interval, fromEvent } from "rxjs";
    fromEvent(document, "click")
      .pipe(
        takeUntil(interval(5000)),
        defaultIfEmpty(null)
      )
      .subscribe(x => console.log(x));
    

    every

    用于判断是不是所有发射的数据都满足条件如果是发射true,只要有一个不满足就直接返回false

    import { every, take } from "rxjs/operators";
    import { interval } from "rxjs";
    interval(1000)
      .pipe(every(x => x > 100))
      .subscribe(x => console.log(`1:${x}`));
    
    interval(1000)
      .pipe(
        take(3),
        every(x => x < 100)
      )
      .subscribe(x => console.log(`2:${x}`));
    

    find

    找到第一个满足条件的数据并发射出去然后结束

    import { find } from "rxjs/operators";
    import { interval } from "rxjs";
    interval(1000)
      .pipe(find(x => x > 4))
      .subscribe(x => console.log(x));
    

    findIndex

    找到第一个满足条件的数据并将它的索引发射出去然后结束。此处的索引可以理解为它是第几个发射的数据,从0开始。

    import { findIndex } from "rxjs/operators";
    import { interval } from "rxjs";
    interval(1000)
      .pipe(findIndex(x => x > 4))
      .subscribe(x => console.log(x));
    

    isEmpty

    判断是否是空源,没有发射任何数据就结束了。和defaultIfEmpty的判断方式一样,只不过返回true/fasle。

    如果发射了数据那么立刻返回false,并且结束。如果没有发射数据,要等到外部源complete了才返回true

    import { isEmpty, takeUntil } from "rxjs/operators";
    import { interval, fromEvent } from "rxjs";
    interval(1000)
      .pipe(isEmpty())
      .subscribe(x => console.log(`1:${x}`));
    fromEvent(document, "click")
      .pipe(
        takeUntil(interval(3000)),
        isEmpty()
      )
      .subscribe(x => console.log(`2:${x}`));
    

    相关文章

      网友评论

        本文标题:rxjs-条件判断类操作符

        本文链接:https://www.haomeiwen.com/subject/bjeccctx.html