RxJS提供的操做符很是有用,儘管Observable是基礎對象。
操做符是聲明式編程中將複雜的異步代碼轉變爲簡單的代碼組合的重要措施。react
操做符是Observable類型的一組方法,好比像:.map(...)
,.filter(...)
,.merge(...)
,等等。當方法被調用的時候,他們不會更改已經存在的Observable流實例,而是返回一個新的Observable流的實例,這個新的對象中的訂閱邏輯則是創建在第一個Observable流之上的。編程
一個Operator可以在當前的Observable流基礎上建立一個新的Observable流。這是一個純粹的新處理過程:以前的Observable保持不變。異步
操做符本質上是可以接收一個Observable流做爲輸入,並返回一個Observable流做爲輸出的純函數。
訂閱輸出的Observable流也會同時訂閱輸入的Observable流。
在下面的例子中,咱們建立了一個自定義的操做符函數能夠將全部輸入的值都乘以10,而後輸出:函數
function multiplyByTen(input) { var output = Rx.Observable.create(function subscribe(observer) { input.subscribe({ next: (v) => observer.next(10 * v), error: (err) => observer.error(err), complete: () => observer.complete() }); }); return output; } var input = Rx.Observable.from([1, 2, 3, 4]); var output = multiplyByTen(input); output.subscribe(x => console.log(x));
輸出爲:單元測試
10 20 30 40
注意以上的例子中,訂閱輸出流也會同時訂閱輸入流的狀況。咱們稱這種現象爲:「操做符訂閱鏈」。測試
什麼是實例操做符? 一般說起操做符,咱們假定指的都是實例操做符,他們是Observable流的實例方法。
例如,若是multiplyByTen
是正式的實例操做符,他將會是這樣的:this
Rx.Observable.prototype.multiplyByTen = function multiplyByTen() { var input = this; return Rx.Observable.create(function subscribe(observer) { input.subscribe({ next: (v) => observer.next(10 * v), error: (err) => observer.error(err), complete: () => observer.complete() }); }); }
實例操做符本質是一個函數,他在內部使用
this
關鍵字指代Observable輸入流。spa
注意輸入Observable流已經再也不做爲函數的參數,它被假定爲this所指向的對象。下面是咱們如何使用實例操做符:prototype
var observable = Rx.Observable.from([1, 2, 3, 4]).multiplyByTen(); observable.subscribe(x => console.log(x));
什麼是靜態操做符? 有別於實例操做符,靜態操做符直接是Observable類的方法。靜態操做符函數內部再也不使用this,它徹底依賴函數的參數。
靜態操做符是依賴於Observable類的一組純函數,一般被用來從頭建立Observable流。
最多見的靜態操做符類型是所謂的建立操做符。不一樣於將輸入流轉換成輸出流的操做符,他們不用接收Observable類型的參數,而是接收諸如number
類型的參數,就能夠建立一道數據流。
一個經典的例子是使用靜態操做符interval()
。他接收一個數字(而不是Observable流)做爲輸入參數,以後產生一道Observable流做爲輸出:
var observable = Rx.Observable.interval(1000 /* number of milliseconds */);
另外一個建立操做符的例子是create()
,在以前的例子裏已經用了不少次。你能夠從這裏查看全部的建立操做符。
然而,靜態操做符們並不只限於簡單建立。一些組合操做符也是靜態的,例如merage
,combineLates
,concat
等等。他們能夠整合多道輸入的Observable流,因此也是很是有意義的靜態操做符。
var observable1 = Rx.Observable.interval(1000); var observable2 = Rx.Observable.interval(400); var merged = Rx.Observable.merge(observable1, observable2);
爲了更好的展現操做符是如何工做的,只有文字性的解釋是不夠的。不少操做符依賴於時間,例如他們可能會使用延遲,取樣,節流,又或者去抖等等方式。
畫一些圖表能很好的說明這些過程。珠寶圖就是用來展現這些的圖表,他包含輸入Observable流,操做符和相關參數,還有輸出流。
在珠寶圖中,時間的流逝被標爲從左到右的水平線,線上的每一個值(「珠寶」)表明了Observable流在執行過程當中發出的值。
下圖你能夠看到對珠寶的詳解。
貫穿本站的文檔,咱們會普遍的使用珠寶圖去解釋操做符是如何生效的。在別的場景下他們或許一樣有用,例如在whiteboard上或者在單元測試中(做爲ASCII圖表)。