從命令式到響應式（四）

上期介紹過了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，囉嗦了一大堆，下面主角登場。

建立類操做符

1. 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));

1. of

---

靜態方法

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

of(1,2,3);

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

示例

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

1. 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));

過濾類操做符

1. 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));

1. 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;

1. 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));

1. 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));

1. takeUntil

---

實例方法

在通知流發出通知以前，持續發射輸入流上的值。在通知流發出值以前，輸出流徹底就是輸入流的鏡像。此操做符會一直監視傳入的通知流，若是通知流發出了值或結束通知，輸出流就會中止發射輸入流上的值，併發出完成通知。

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

示例

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

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