源代碼：

const source$ = range(0, 10);

range(0,10)返回一個新的Observable，但是不會立即執行，直到遇到subscribe調用為止：

下圖高亮的這段代碼，在Observable.subscribe后會執行：

注冊到Observable的_subscribe里：

源代碼：

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目錄里：

filter操作接收的參數predicate, 類型是一個函數，該函數接收x和index兩個參數，返回boolean類型，這就是所謂的filter-過濾器。filter操作返回一個新的函數，該函數接收一個新的輸入source，對source調用lift操作，施加predicate操作。

然后執行pipe操作：

pipe的輸入參數就是filter調用的返回結果：

pipeFromArray返回的就是包裹了filter操作的filterOperatorFunction：

進入之前filter調用返回的新函數：

這個source應該是range(0,10)返回的Observable：

對原始Observable對象調用filter返回的predicate操作：

life操作內部新建了一個Observable對象，source是原始Observable對象，operator就是filter對應的predicate.

Observable遇到subscribe方法才會真正地執行Observable內部的方法：

新建一個subscriber，第一個輸入參數nextOrObserver就是應用程序里subscribe方法里傳入的箭頭函數：

subscriber是subscription的子類：

next就是應用程序傳入的箭頭函數：

注意這里，sink已經準備調用operator了。operator就是filter操作：

進入filter操作：

開始執行subscribe：

執行complete的條件：

調用next：

由此可見，range Observable里包含的值，逐一調用filter：

如果filter返回true，繼續調用下一個Observable對象：

這里最終就調用應用程序里傳入的subscribe方法了：

range = 0的value已經執行完畢了，下面進行range1：

因為range = 1時filter返回false，所以Observable鏈式執行到這里就中斷了：

range = 2，下面的原理類似，不重復介紹了。

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

總結

以上是生活随笔為你收集整理的rxjs pipe和filter组合的一个实际例子的单步调试的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。