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

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

源代码:

const source$ = range(0, 10);

image.png

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

image.png

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

注册到Observable的_subscribe里:image.png

源代码:

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目录里:

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


image.png

然后执行pipe操作:image.png

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

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

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

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

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

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

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

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

subscriber是subscription的子类:image.pngimage.png

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

image.png

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

进入filter操作:image.png

开始执行subscribe:image.png

执行complete的条件:image.png

调用next:image.pngimage.png

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

image.png

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

image.png

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

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

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

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

相关文章
|
14天前
|
数据处理 C语言 开发者
Filter函数有哪些的高级用法
`filter()`函数是Python中用于从序列中按条件筛选元素的内置函数。它接受一个函数和一个可迭代对象作为参数,返回一个迭代器,该迭代器包含应用函数后返回`True`的元素。基本语法是`filter(function, iterable)`。可以使用`lambda`表达式简化条件,例如筛选偶数:`filter(lambda x: x % 2 == 0, numbers)`。文章还讨论了使用自定义函数、处理多个条件的情况,并对比了`filter()`与列表推导式的用法。
|
14天前
|
Python
Python教程:一文了解如何使用Lambda 表达式和 filter函数实现过滤器
在 Python 中,Lambda 表达式是一种匿名函数,也就是没有名称的函数。它允许您快速定义简单的单行函数,通常用于函数式编程中的一些场景,例如在高阶函数中作为参数传递。
18 2
|
2月前
|
Python
Python函数式编程,map(), filter() 和 reduce() 函数的作用是什么?
Python函数式编程,map(), filter() 和 reduce() 函数的作用是什么?
|
10月前
|
存储
rxjs Observable of 操作符的单步调试分析
rxjs Observable of 操作符的单步调试分析
|
9月前
|
SQL 分布式计算 Go
Go编程模式 - 6-映射、归约与过滤
但是,我不建议大家在实际项目中直接使用这一块代码,毕竟其中大量的反射操作是比较耗时的,尤其是在延迟非常敏感的web服务器中。 如果我们多花点时间、直接编写指定类型的代码,那么就能在编译期发现错误,运行时也可以跳过反射的耗时。
34 0
|
PHP C#
C#(十四)之函数(方法)
本篇内容记录了函数、函数的参数、参数匹配、递归函数。
133 0
C#(十四)之函数(方法)
rxjs pipe和map组合的一个实际例子的单步调试
rxjs pipe和map组合的一个实际例子的单步调试
132 0
rxjs pipe和map组合的一个实际例子的单步调试
rxjs pipe和filter组合的一个实际例子的单步调试
rxjs pipe和filter组合的一个实际例子的单步调试
107 0
rxjs pipe和filter组合的一个实际例子的单步调试
rxjs的pipe和map配合使用的单步调试
rxjs的pipe和map配合使用的单步调试
192 0
rxjs的pipe和map配合使用的单步调试
通过rxjs的一个例子, 来学习SwitchMap的使用方法
通过rxjs的一个例子, 来学习SwitchMap的使用方法
209 0
通过rxjs的一个例子, 来学习SwitchMap的使用方法