当前位置：网站首页>Rxjs Observable. Execute logical analysis of pipe passing in multiple operators

Rxjs Observable. Execute logical analysis of pipe passing in multiple operators

2022-06-11 10:50:00 【Hua Weiyun】

Test code ：

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

pipe The two input operations of the operation ：

The input parameter is an array , Contains two elements ：

Use the original Observable As input , Perform these two operations ：

Array of reduce It's a native method ：

Here's the code , It introduces reduce Usage of ：

<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 Take two parameters , The first argument is a function , This function receives 4 Three input parameters ,previous,current,index and array：

previous： The previous round reduce Iteration value , If the first round , Then the value is the second parameter , That's the initial value
current： The current round of reduce Iteration value . for example ,array Element is 1,2,3,4, be reduce Every iteration ,current Values, respectively 1,2,3,4
index： Iterated index values
array： call reduce The original array of , With the previous index Parameters , Access to the contents of the entire array

In actual use ,previous and current These two parameters are used most .

go back to pipeFromArray The implementation of the .

reduce First iteration ：

prev yes input The initial value passed in ,fn It's input fns The first element of the array . That is the first one. map Back to operator：

There will be no specific implementation here map operation , But back to a new one Observable object , As a second round reduce The input to the iteration ：