rxjs里scan operator的执行研究

简介: rxjs里scan operator的执行研究

源代码:

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

入口:

image.png

由此可见,scan的第二个参数可以用来传入seed:

image.png

scan执行完之后,返回到pipe函数执行中,pipeFromArray(operations)(this)会执行scan函数返回的新函数,image.png

即:scanOperatorFunctionimage.png

创建新的scanOperator:

image.png

scan.js内部会创建一个新的Observable,将原始的Observable维护在source字段里:

image.png

然后执行应用代码中的subscribe:

image.png

此处执行operator,即scan操作:image.pngimage.png

首先调用range.js里的next方法,逐一生成间隔:image.png

这里再次看到了const source$ = range(0, 10)语句的惰性生成值效果:在range方法返回的Observable对象没有调用subscribe方法之前,根本不会有任何整型值生成的行为发生。


从range.next调用执行到scan的accumulator方法体内:

image.png

此处进入了我们应用程序实现的accumulator方法:image.png


相关文章
|
3月前
|
存储
向量化代码实践问题之Task<T>类中的on_completed函数是如何工作的
向量化代码实践问题之Task<T>类中的on_completed函数是如何工作的
|
5月前
|
数据库
SAP ABAP 更新函数(Update Function Module)执行出错的原因分析试读版
SAP ABAP 更新函数(Update Function Module)执行出错的原因分析试读版
|
JavaScript
rxjs Observable filter Operator 的实现原理介绍
rxjs Observable filter Operator 的实现原理介绍
rxjs 里 Skip 操作符的一个使用场景
rxjs 里 Skip 操作符的一个使用场景
|
前端开发
前端学习案例1-call,apply的重用
前端学习案例1-call,apply的重用
72 0
前端学习案例1-call,apply的重用
|
JavaScript
redux ts(typescrip) reducer中action的类型检查
实现的业务场景,我想实现一个用户管理的功能,可以新增用户,删除,修改用户等。每一个功能都是独立的并且所需要的参数是不一样的,所以做了以下类型检查。
redux ts(typescrip) reducer中action的类型检查
ts重点学习71-implement语句
ts重点学习71-implement语句
103 0
ts重点学习71-implement语句
ts重点学习72-implement语句
ts重点学习72-implement语句
229 0