源代碼：

const source$ = range(0, 10);

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

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

注冊到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調(diào)用的參數(shù)傳入的是filter, map和scan三個操作的結(jié)果，因此首先執(zhí)行filter：
位于operators目錄里：

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

然后執(zhí)行pipe操作：

pipe的輸入?yún)?shù)就是filter調(diào)用的返回結(jié)果：

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

進(jìn)入之前filter調(diào)用返回的新函數(shù)：

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

對原始Observable對象調(diào)用filter返回的predicate操作：

life操作內(nèi)部新建了一個Observable對象，source是原始Observable對象，operator就是filter對應(yīng)的predicate.

Observable遇到subscribe方法才會真正地執(zhí)行Observable內(nèi)部的方法：

新建一個subscriber，第一個輸入?yún)?shù)nextOrObserver就是應(yīng)用程序里subscribe方法里傳入的箭頭函數(shù)：

subscriber是subscription的子類：

next就是應(yīng)用程序傳入的箭頭函數(shù)：

注意這里，sink已經(jīng)準(zhǔn)備調(diào)用operator了。operator就是filter操作：

進(jìn)入filter操作：

開始執(zhí)行subscribe：

執(zhí)行complete的條件：

調(diào)用next：

由此可見，range Observable里包含的值，逐一調(diào)用filter：

如果filter返回true，繼續(xù)調(diào)用下一個Observable對象：

這里最終就調(diào)用應(yīng)用程序里傳入的subscribe方法了：

range = 0的value已經(jīng)執(zhí)行完畢了，下面進(jìn)行range1：

因為range = 1時filter返回false，所以O(shè)bservable鏈?zhǔn)綀?zhí)行到這里就中斷了：

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

要獲取更多Jerry的原創(chuàng)文章，請關(guān)注公眾號"汪子熙":

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。