专栏首页Jerry的SAP技术分享rxjs pipe和filter组合的一个实际例子的单步调试

rxjs pipe和filter组合的一个实际例子的单步调试

源代码:const source$ = range(0, 10);

range(0,10)返回一个新的Observable,但是不会立即执行,直到遇到subscribe调用为止:

下图高亮的这段代码,在Observable.subscribe后会执行:

注册到Observable的_subscribe里:

源代码:

ngOnInit(): void {
    console.log('before ngOnInit');
    const source$ = range(0, 10);


    source$.pipe(
      filter((x, index) => {
        console.log('inside filter!: ' + x + ' index: ' + index); 
        return x % 2 === 0 }),
      map( x => { 
        console.log('inside map: ' + x);
        return (x + x); }
        ),
      // scan((acc, x) => acc + x, 0)
      scan(this.accumulator)
    )
    .subscribe(x => console.log('result: ' + x));
  }

pipe调用的参数传入的是filter, map和scan三个操作的结果,因此首先执行filter: 位于operators目录里:

filter操作接收的参数predicate, 类型是一个函数,该函数接收x和index两个参数,返回boolean类型,这就是所谓的filter-过滤器。filter操作返回一个新的函数,该函数接收一个新的输入source,对source调用lift操作,施加predicate操作。

然后执行pipe操作:

pipe的输入参数就是filter调用的返回结果:

pipeFromArray返回的就是包裹了filter操作的filterOperatorFunction:

进入之前filter调用返回的新函数:

这个source应该是range(0,10)返回的Observable:

对原始Observable对象调用filter返回的predicate操作:

life操作内部新建了一个Observable对象,source是原始Observable对象,operator就是filter对应的predicate.

Observable遇到subscribe方法才会真正地执行Observable内部的方法:

新建一个subscriber,第一个输入参数nextOrObserver就是应用程序里subscribe方法里传入的箭头函数:

subscriber是subscription的子类:

next就是应用程序传入的箭头函数:

注意这里,sink已经准备调用operator了。operator就是filter操作:

进入filter操作:

开始执行subscribe:

执行complete的条件:

调用next:

由此可见,range Observable里包含的值,逐一调用filter:

如果filter返回true,继续调用下一个Observable对象:

这里最终就调用应用程序里传入的subscribe方法了:

range = 0的value已经执行完毕了,下面进行range1:

因为range = 1时filter返回false,所以Observable链式执行到这里就中断了:

range = 2,下面的原理类似,不重复介绍了。

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CRM Fiori Customer report filter过滤器

    Webstorm更友好的Git版本控制,有改动的行有白色标记提示,并且能够inline查看diff或者选择revert,这样我就不担心mess up produ...

    Jerry Wang
  • My Account应用里Account主数据搜索的FromDate是如何在后台生成的

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.bl...

    Jerry Wang
  • SAP ABAP SICF事务码和SAP Hybris的链式过滤器filter chain

    则回溯到其parent节点,直至定位到一个有handler class的node位置。

    Jerry Wang
  • Delta Lake - 数据湖的数据可靠性

    今天笔者将分享一位大神关于 Delta Lake 的演讲内容。这位是 Apache Spark 的 committer 和 PMC 成员,也是 Spark SQ...

    Fayson
  • 谁来保卫特斯拉?360安全卫士!

    镁客网
  • 流动的数据——使用 RxJS 构造复杂单页应用的数据逻辑

    我们经常见到这么一些场景: 微博的列表页面; 各类协同工具的任务看板,比如 Teambition。 ? 这类场景的一个共同特点是: 由若干个小方块构成; 每个小...

    CSDN技术头条
  • 大数据hadoop入门之hadoop家族详解

    大数据这个词也许几年前你听着还会觉得陌生,但我相信你现在听到hadoop这个词的时候你应该都会觉得“熟悉”!越来越发现身边从事hadoop开发或者是正在学习ha...

    用户3392176
  • python: filter 函数

    python2 中, filter 返回 的是 list型 。 python3 中, filter 返回 的是 filter object(filter对象...

    JNingWei
  • 遇到的那些报错

    1. zipfile.BadZipFile: File is not a zip file

    明天依旧可好
  • 【R语言】基础知识|dplyr管道函数处理表格

    data<-read_excel("~/Desktop/Excel学习/表姐牌口罩销售数据.xlsx")

    黑妹的小屋

扫码关注云+社区

领取腾讯云代金券