摘要：使用的操作符這條從左到右的橫線代表經(jīng)過操作符轉(zhuǎn)換后的輸出流。返回值通過判定函數(shù)檢測的值組成的流。返回值持續(xù)發(fā)出輸入流上的值，直到通知流上發(fā)出值為止。

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

首先需要分清的是操作符是屬于實例方法還是靜態(tài)方法，實例方法的實例當(dāng)然指的是Observable類的實例，通常情況會在數(shù)據(jù)轉(zhuǎn)換的過程中使用；而靜態(tài)方法當(dāng)然指的是Observable類的靜態(tài)方法，只能通過Observable類來調(diào)用，大部分創(chuàng)建類型的操作符都是靜態(tài)方法，在rxjs5中區(qū)別非常明顯，例如：

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

// 這里的interval 是靜態(tài)方法，而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)
    );

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

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

            multipleByTen // 使用的操作符

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

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

from

靜態(tài)方法

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

            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

靜態(tài)方法

創(chuàng)建一個流，把傳入此函數(shù)的參數(shù)從左到右依次推送到流上，然后發(fā)出結(jié)束通知。

            of(1,2,3);

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

示例

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

timer

靜態(tài)方法

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

            timer(3000, 1000);

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

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

示例

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

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

filter

實例方法

創(chuàng)建一個流，它的值是使用判定函數(shù)對輸入流發(fā)出的值進行過濾后的值。

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

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

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

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

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

示例

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

first

實例方法

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

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

            first

    ---------a|

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

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

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

示例

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

實例方法

返回一個跳過指定數(shù)量的值的流。

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

            skip(3);

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

返回值 Observable 跳過了一定數(shù)量值的流。

示例

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

take

實例方法

從第一個值開始發(fā)出指定數(shù)量的值，然后發(fā)出結(jié)束通知。

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

            take(3);

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

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

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

異常 ArgumentOutOfRangeError 在給此操作符傳入負(fù)數(shù)時給觀察者發(fā)出的錯誤。

示例

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

takeUntil

實例方法

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

返回值 Observable 持續(xù)發(fā)出輸入流上的值，直到通知流上發(fā)出值為止。

示例

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

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