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

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

测试代码:

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

pipe 操作的两个输入操作:

image.png

<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 参数,能访问整个数组的内容

image.png

image.png

image.png

相关文章
|
2月前
|
JavaScript 前端开发 开发者
async/await和Generators在处理异步时有什么区别
总的来说,async/await 是在 Generators 的基础上发展而来的,它解决了 Generators 在处理异步时的一些不足之处,提供了更简洁、高效和易于理解的方式来处理异步操作。然而,Generators 在某些特定场景下仍然可能有其应用价值。
47 4
|
2月前
|
JavaScript 前端开发
计算属性和 watch 监听函数的回调函数可以异步执行吗?
【10月更文挑战第23天】总的来说,虽然计算属性和监听函数的回调函数通常是同步执行的,但在特定情况下可以进行异步操作。在实际应用中,要根据具体的需求和场景来合理选择是否使用异步执行,并注意处理好异步操作的结果和状态,以确保应用的正常运行和性能优化。
|
3月前
|
C++ 容器
函数对象包装器function和bind机制
函数对象包装器function和bind机制
27 0
|
8月前
|
前端开发 JavaScript
js开发:请解释Promise是什么,以及它如何解决回调地狱(callback hell)问题。
Promise是JavaScript解决异步操作回调地狱的工具,代表未来可能完成的值。传统的回调函数嵌套导致代码难以维护,而Promise通过链式调用`.then()`和`.catch()`使异步流程清晰扁平。每个异步操作封装为Promise,成功时`.then()`传递结果,出错时`.catch()`捕获异常。ES6的`async/await`进一步简化Promise的使用,使异步代码更接近同步风格。
104 1
|
8月前
|
人工智能 机器人 中间件
【C++】C++回调函数基本用法(详细讲解)
【C++】C++回调函数基本用法(详细讲解)
|
存储 前端开发 JavaScript
|
缓存 JavaScript 前端开发
RxJS系列05:操作符 Operators(下)
RxJS系列05:操作符 Operators(下)
|
前端开发 JavaScript Java
函数防抖节流原理及封装+闭包+call/apply/bind
函数防抖节流原理及封装+闭包+call/apply/bind
107 0
|
JavaScript 前端开发
JS引擎的执行机制event loop
JS引擎的执行机制event loop
76 0
|
JavaScript 前端开发 算法
RxJS系列06:测试 Observable
RxJS系列06:测试 Observable
117 0