RxJS 学习系列 9. 过滤操作符 takeUntil，takeWhile，skipUntil，skipWhile

mafeifan

发布于 2019-05-13 18:43:39

3.3K0

发布于 2019-05-13 18:43:39

文章被收录于专栏：finleyMa

take 取开头的N个值，需要传入数字类型 takeUntil，takeWhile 都是 take的变种 takeUntil 接收的是 Observable 类型，当这个Observable发出值才完成 takeWhile 接收的是 function ，一旦返回值为false 就完成

skip 跳过开头的N个值，需要传入数字类型 skipUntil，skipWhile 都是 skip 的变种 skipUntil 接收的是 Observable 类型，当这个Observable发出值才完成 skipWhile 接收的是 function ，一旦返回值为false 就完成

总结：take 和 skip 互逆

<script src='../lib/rxjs6.3.3.umd.js'></script>
<script>
    // https://rxjs-cn.github.io/learn-rxjs-operators/operators/filtering/filter.html
    // filter
    // 发出符合给定条件的值

    const { from, interval, timer } = rxjs;
    const { filter, take, last, startWith, skip, takeUntil, takeWhile, skipWhile } = rxjs.operators;


    interval(1000)
      .pipe(
        // timer(5000) 是等待5s发出值
        // takeUntil 只取timer(5000)开始发出之前的那些值
        takeUntil(timer(5000))
      )
      // 输出 0，1，2，3
      .subscribe(val => console.log(val));

    interval(1000)
      .pipe(
        // timer(5000) 是等待5s发出值
        // takeWhile 只取timer(5000)开始发出之前的那些值
        takeWhile((val) => val < 5)
      )
      // 输出 -0，-1，-2，-3, -4
      .subscribe(val => console.log(`-${val}`));
</script>

来看下skip操作，我们只替换take为skip，显示的内容刚好相反

    const { from, interval, timer } = rxjs;
    const { filter, take, last, startWith, skip, takeUntil, takeWhile, skipWhile, skipUntil } = rxjs.operators;

    interval(1000)
      .pipe(
        // timer(5000) 是等待5s发出值
        // skipUntil 舍弃timer(5000)开始发出之前的那些值
        skipUntil(timer(5000))
      )
      // 从 4 开始输出 每秒1发送一次，4, 5, 6, 7...
      .subscribe(val => console.log(val));


    interval(1000)
      .pipe(
        // timer(5000) 是等待5s发出值
        // skipWhile 舍弃timer(5000)开始发出之前的那些值
        // 输出
        skipWhile((val) => val < 5)
      )
      // 从 -5 开始输出 每秒1发送一次，如 -5, -6, -7 ...
      .subscribe(val => console.log(`-${val}`));

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019.04.29 ，如有侵权请联系 cloudcommunity@tencent.com 删除

function