rxjs里scan operator的执行研究

时间:2022-07-25
本文章向大家介绍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));
  }

入口:

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

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

即:scanOperatorFunction

创建新的scanOperator:

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

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

此处执行operator,即scan操作:

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

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

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

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