Rxjs Observable.pipe 传入多个 operators 的执行逻辑分析
【摘要】 测试代码：fromEvent(this.test, 'click').pipe(map( event => event.timeStamp), mapTo(1)).subscribe((event) => console.log(event));pipe 操作的两个输入操作：输入参数为数组，包含两个元素：使用原始的 Observable 作为输入，执行这两个操作：数组的 reduce 是一个...
测试代码：
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：
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）