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,下面的原理类似,不重复介绍了。

要获取更多Jerry的原创文章,请关注公众号"汪子熙":

汪子熙 CSDN认证博客专家 前端框架 Node.js SAP
JerryWang,2007年从电子科技大学计算机专业硕士毕业后加入SAP成都研究院工作至今。Jerry是SAP社区导师,SAP中国技术大使。2020年5月下旬,Jerry做了脑部肿瘤的开颅切除手术,对编程和人生又有了新的感悟。
92讲视频课+16大项目实战+源码+¥800元课程礼包+讲师社群1V1答疑+社群闭门分享会=99元   为什么学习数据分析?       人工智能、大数据时代有什么技能是可以运用在各种行业的?数据分析就是。       从海量数据中获得别人看不见的信息,创业者可以通过数据分析来优化产品,营销人员可以通过数据分析改进营销策略,产品经理可以通过数据分析洞察用户习惯,金融从业者可以通过数据分析规避投资风险,程序员可以通过数据分析进一挖掘出数据价值,它和编程一样,本质上也是一个工具,通过数据来对现实事物进行分析和识别的能力。不管你从事什么行业,掌握了数据分析能力,往往在其岗位上更有竞争力。    本课程共包含五大模块: 一、先导篇: 通过分析数据分析师的一天,让学员了解全面了解成为一个数据分析师的所有必修功法,对数据分析师不在迷惑。   二、基础篇: 围绕Python基础语法介绍、数据预处理、数据可视化以及数据分析与挖掘......这些核心技能模块展开,帮助你快速而全面的掌握和了解成为一个数据分析师的所有必修功法。   三、数据采集篇: 通过网络爬虫实战解决数据分析的必经之路:数据从何来的问题,讲解常见的爬虫套路并利用三大实战帮助学员扎实数据采集能力,避免没有数据可分析的尴尬。   四、分析工具篇: 讲解数据分析避不开的科学计算库Numpy、数据分析工具Pandas及常见可视化工具Matplotlib。   五、算法篇: 算法是数据分析的精华,课程精选10大算法,包括分类、聚类、预测3大类型,每个算法都从原理和案例两个角度学习,让你不仅能用起来,了解原理,还能知道为什么这么做。
©️2020 CSDN 皮肤主题: 黑客帝国 设计师:上身试试 返回首页