摘要：使用的操作符這條從左到右的橫線代表經過操作符轉換后的輸出流。返回值通過判定函數檢測的值組成的流。返回值持續發出輸入流上的值，直到通知流上發出值為止。

上期介紹過了rxjs中的三大件，Observable，subscription，subject，但是在開發過程我們最常接觸到的東西非操作符莫屬。比如上期代碼中曾出現過的from就是一個操作符。rxjs中的操作符大致上可以分為幾類，創建類，組合類，轉換類，過濾類，條件類，聚合類，錯誤處理類，多播類及工具類，其中前四類是數據處理時使用頻率非常高的，在本節及下一節中將介紹其中一些使用頻率非常高的操作符。rxjs一共提供了120個左右操作符，合理的使用這些操作符會使我們獲取愉快的編碼體驗。

首先需要分清的是操作符是屬于實例方法還是靜態方法，實例方法的實例當然指的是Observable類的實例，通常情況會在數據轉換的過程中使用；而靜態方法當然指的是Observable類的靜態方法，只能通過Observable類來調用，大部分創建類型的操作符都是靜態方法，在rxjs5中區別非常明顯，例如：

import "rxjs/Observable";
import "rxjs/add/operator/map";

// 這里的interval 是靜態方法，而map就是實例方法。
Observable.interval(1000).map(num => num * num);

在rxjs6中還可能這樣寫：

import { interval } from "rxjs/observable/interval";
import { map } from "rxjs/operators/map";

// 引入的位置是不一樣的。
interval(1000)
    .pipe(
        map(num => num * num)
    );

最直觀的描述操作符的行為的方式就是彈珠圖，在官網上重要的操作符基本上都給出了相應的彈珠圖。從現在開始為了表達的簡潔，我們把可觀測序列稱之為流，彈珠圖各部分的含義如下：

// 這條從左到右的橫線代表隨時間的推移，輸入流的執行過程。
// 橫線上的值代表從流上發射出的值
// 橫線尾部的豎線代表complete通知執行的時間點，表示這條流已經成功的執行完成。
----------4------6--------------a-------8-------------|---->

            multipleByTen // 使用的操作符

// 這條從左到右的橫線代表經過操作符轉換后的輸出流。
// 橫線尾部的X代表在這個時間點上流發生了錯誤，至此之后不應該再有 Next 通知或 Complete 通知從流上發出。
---------40-----60--------------X--------------------------->

前面說過操作符會把我們的數據進行轉換，在響應式編程中，我們應該盡量保持數據在流中進行轉換，而不是時刻想著去subscribe一條流，取出數據，再轉換數據。尤其在angular中，能不手動的subscribe的流，一定要力求不主動訂閱，最典型的就是頁面上需要顯示的數據，我們完全可以交給async管道來進行訂閱。OK，啰嗦了一大堆，下面主角登場。

from

靜態方法

將數組、類數組對象、promise、部署了遍歷器接口的對象或類 Observable 對象轉換成Observable，它
幾乎可以將任何東西都轉換成流，并且將原數據上的值依次推送到流上，字符串被當成由字母組成的數組進行轉換。

            from([1,2,3])

    1--------------2--------------3|

示例

from([1,2,3,4,5]).subscribe(v => console.log(v));

function* generatorDoubles(seed) {
    var i = seed;

    while(true) {
        yield i;

        i = i*2
    }
}

const iterator = generatorDoubles(3);
from(iterator).take(5).subscribe(v => console.log(v));

of

靜態方法

創建一個流，把傳入此函數的參數從左到右依次推送到流上，然后發出結束通知。

            of(1,2,3);

    1-------------2--------------3|

示例

of(10,20,30).subscribe(v => console.log(v));

timer

靜態方法

創建一個輸出流，在指定的延遲時間到達后開始發射值，在指定的間隔時間到達后發射遞增過的值。類似于interval，但是這個操作符允許指定流開始發射值的時間，

            timer(3000, 1000);

    ------0--1--2--3--4--5--------->

第一個參數代表等待時間，第二個參數代表時間間隔，這些值是一些數字常量。等待時間可以是一個毫秒數，也可以是一個日期對象。如果沒有指定時間周期，輸出流上只會發射0，反之，它會發出一個無限的數列。

示例

Rx.Observable.timer(3000, 1000)
    .subscribe(v => console.log(v));

Rx.Observable.timer(5000)
    .subscribe(v => console.log(v));

filter

實例方法

創建一個流，它的值是使用判定函數對輸入流發出的值進行過濾后的值。

    --0--1--2--3--4--5----|-->

            filter(v => v % 2 === 0);

    --0-----2-----4-------|>

和數組的filter方法行為一樣，從輸入流上獲取值，使用判定函數對值進行過濾，只有符合過濾條件的值才會在輸出流上發出。

返回值 Observable 通過判定函數檢測的值組成的流。

示例

from([1,2,3,4,5,6])
    .filter(num => num %2 === 0)
    .subscribe(v => console.log(v));

first

實例方法

發送輸入流上的第一個值，或者第一個符合某些條件的值。

    ---------a-------b------c---------d-->

            first

    ---------a|

在不傳入任何參數時，這個操作符僅發出輸入流上的第一個值，然后立即發出結束通知。如果傳入一個判定函數，則發出第一個通過判定函數檢測的值。它還可以接受一個結果控制函數來轉化輸出的值，或一個在輸入流沒有發出符合條件的值情況下使用的默認值。如果沒有提供默認值，并且在輸入流上也沒有找到符合條件的值時，輸出流將會拋出錯誤。

返回值 Observable 第一個符合條件的值。

異常 EmptyError 在結束通知發出前如果沒有發出過有效值，將會發送一個錯誤通知給觀察者。

示例

from([2,3,4])
    .first()
    .subscribe(v => console.log(v));

from([2,3,4])
    .first(num => num === 5)
    .subscribe(v => console.log(v)); // EmptyError;

skip

實例方法

返回一個跳過指定數量的值的流。

---a---b---c---d---e---|->

            skip(3);

---------------d---e---|>

返回值 Observable 跳過了一定數量值的流。

示例

from([1,2,3,4,5,6])
    .skip(3)
    .subscribe(v => console.log(v));

take

實例方法

從第一個值開始發出指定數量的值，然后發出結束通知。

    ---a------b------c------d-----e---|-->

            take(3);

    ---a------b------c|

輸出流僅僅發出了輸入流上從第一個值開始的n個值。如果輸入流上值的個數小于n，那么所有的值都會被發出。值發射完成后，不管輸入流有沒有發出結束通知，輸出流都會立即發出結束通知。

返回值 Observable 發出輸入流上從第一個值開始的n個值，或者輸入流發出值的個數小于n時發出所有的值的流。

異常 ArgumentOutOfRangeError 在給此操作符傳入負數時給觀察者發出的錯誤。

示例

interval(1000)
    .take(5)
    .subscribe(v => console.log(v));

takeUntil

實例方法

在通知流發出通知之前，持續發射輸入流上的值。在通知流發出值之前，輸出流完全就是輸入流的鏡像。此操作符會一直監視傳入的通知流，如果通知流發出了值或結束通知，輸出流就會停止發射輸入流上的值，并發出完成通知。

返回值 Observable 持續發出輸入流上的值，直到通知流上發出值為止。

示例

Rx.Observable.interval(1000)
    .takeUntil(Rx.Observable.fromEvent(document, "click"))
    .subscribe(v => console.log(v));

學習操作符時，我們還要關注的一點是，這個操作符是否會發出結束通知，一方面訂閱發出結束通知的流時，在庫的底層會幫助我們釋放資源可以省去手動取消訂閱，比如 angular 中 http 服務上的方法，另一方面結束通知可能會影響接下來你使用的操作符，典型的如reduce 和 scan，在一個不發出結束通知的流上使用reduce時你將永遠不會得到結果。