专栏首页finleyMaRxJS 学习系列 9. 过滤操作符 takeUntil,takeWhile,skipUntil,skipWhile

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

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}`));

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • (转) Laravel Eloquent 提示和技巧

    原文:https://learnku.com/articles/19876#1face4 Eloquent ORM 看起来像一个简单的机制,但在幕后,有很多半...

    mafeifan
  • Ansible 2 -- 3 常用模块及常用API

    ansible 中的模块可以用在ansible命令行或后面要讲的playbook中。不同的模块提供不同的功能,官方提供的非常多,几千种,常用的有几十种,这里只介...

    mafeifan
  • 使用react-native-tab-navigator切换页面

    切换页面是app最基本功能。这个功能需要用Navigation组件实现。 RN发展太快了(v49),之前自带的Navigation组件被弃用了,如果只针对io...

    mafeifan
  • DeepCoder已经开始“偷”写代码,程序员的末日真的来了?

    人工智能系统正在变得越来越聪明,它们不仅能下围棋、炒股票,现在还学会了写代码。由微软和剑桥大学研究员一同开发的人工智能系统DeepCoder,完成了...

    BestSDK
  • 再看最短路算法 1 —— 单源最短路

    学了多年的算法,最短路问题相当之常见———— 好久没写过最短路的问题了,直到昨天闲的无聊来了一题——BZOJ3402(HansBug:额才发现我弱到只能刷水的地...

    HansBug
  • “通信工程师”到底是干啥的?

    所有服务于这个庞大目标的事业,都可以归为通信事业。移动通信、光纤通信、微波通信、卫星通信、计算机通信,全部都属于通信的一部分。

    鲜枣课堂
  • 什么是维数灾难?

    SVM第一话(回复 SVM1 查看)里提到了“维数灾难”,什么是维数灾难呢? 维数灾难(英语:curseof dimensionality,又名维度的诅咒)是一...

    数说君
  • php检测值是否存在二维数组

    本文为仙士可原创文章,转载无需和我联系,但请注明来自仙士可博客www.php20.cn

    仙士可
  • 对于技术焦虑的一点想法

    有一个公众号是 吃草的罗汉,最近看他的一篇文章,我被里面的一小段内容吸引了,他这样写道: 在成长的道路上,有时你越是不喜欢的事,越会阴差阳错的让你遇见 在《我也...

    jeanron100
  • 读 koa2 源码后的一些思考与实践

    优点这个东西,我直接说它多好,你可能又不开心,但是我们可以对比哦!这里我只说它对比原生的 Node.js开启 http 服务 带来了哪些优点!

    coder_koala

扫码关注云+社区

领取腾讯云代金券