Rxjs Observable.pipe 传入多个 operators 的执行逻辑分析

测试代码：

fromEvent(this.test, 'click').pipe(map( event => event.timeStamp), mapTo(1)).subscribe((event) => console.log(event));

pipe 操作的两个输入操作：

输入参数为数组，包含两个元素：

使用原始的 Observable 作为输入，执行这两个操作：

数组的 reduce 是一个原生方法：

下面这段代码，介绍了 reduce 的用法：

<html>
<script>var a = [1,2,3,4];function fn(pre, cur, index, arr){console.log(`previous: ${pre}, cur: ${cur},index: ${index}, whole arr: ${arr}`);return pre + cur;
}console.log(a.reduce( fn, 0));</script>
</html>

reduce 接受两个参数，第一个参数是一个函数，该函数接收 4 个输入参数，previous，current，index 和 array：

previous：前一轮 reduce 迭代值，如果第一轮，则该值为第二个参数，即初始值
current：当前这轮的 reduce 迭代值。例如，array 元素为1，2，3，4，则 reduce 每轮迭代，current 值分别为1，2，3，4
index：迭代的索引值
array：调用 reduce 的原始数组，配合前一个 index 参数，能访问整个数组的内容

在实际使用过程中，previous 和 current 这两个参数用的最多。

回到 pipeFromArray 的实现。

reduce 第一轮迭代：

prev 是 input 传入的初始值，fn 是输入 fns 数组的第一个元素。即第一个 map 返回的 operator：

这里不会执行具体的 map 操作，而是返回一个新的 Observable 对象，作为第二轮 reduce 迭代的输入：

lift 方法就是返回新的 Observable 对象：

mapTo 的实现：

经过 pipe 处理过的 Observable，最后应用程序订阅的，就是这个最终版的 Observable：

更多Jerry的原创文章，尽在：“汪子熙”:

Rxjs Observable.pipe 传入多个 operators 的执行逻辑分析相关推荐

RxJS学习之路四（Operators（1））
什么是Operators Operators是用来操作处理Observable 的一个函数,对单个或多个Observable进行一定处理后返回新的Observable. 描述各种Operators的功 ...
rxjs的pipe和map配合使用的单步调试
测试代码: const a = of([1, 2, 3]);const b = map((data: number[]) => {for( let i = 0; i < data.leng ...
Rxjs Observable
创建Observable: Rx.Observable.create 是 Observable 构造函数的别名,它接收一个参数:subscribe 函数. 例子:每秒推送一个"Hi" ...
将 Observable.pipe 的输入参数手动分解
如下图所示:第38行的变量 this.selectedBrowser.valueChanges 是一个 Observable,我把传递到 pipe 方法的参数,分解成 op1 和 op2: 遇到错误消 ...
rxjs of操作符传入数组的单步执行
源代码: const a = of([1, 2, 3]);const b = a.pipe(map((data) => {for( let i = 0; i < data.length; ...
使用 RxJs Observable 来避免 Angular 应用中的 Promise 使用
我们通过一个具体的例子来阐述. 考虑您正在构建一个搜索输入掩码,该掩码应在您键入时立即显示结果. 如果您曾经构建过这样的东西,那么您可能会意识到该任务带来的挑战. 不要在每次击键时都点击搜索端点将搜 ...
通过一个实际例子理解Angular rxjs Observable的异步行为
源代码: ngOnInit(): void {const a = new Observable((observer) => {observer.next(1);observer.next(2); ...
如何取消Angular rxjs Observable的订阅
源代码: ngOnInit(): void {const ob = new Observable(function subscribe(observer) {// 追踪 interval 资源cons ...
【Groovy】Groovy 脚本调用 ( 命令行执行 Groovy 脚本并传入参数 | 获取 Groovy 脚本执行参数 )
文章目录前言一. 命令行执行 Groovy 脚本并传入参数二.获取 Groovy 脚本执行参数前言在 Groovy 脚本 , Groovy 类 , Java 类中 , 可以调用 Groovy ...

Rxjs Observable.pipe 传入多个 operators 的执行逻辑分析

Rxjs Observable.pipe 传入多个 operators 的执行逻辑分析相关推荐

最新文章

热门文章