30 天精通 RxJS (09)： Observable Operator - skip, takeLast, last, concat, startWith

這是【30天精通 RxJS】的 09 篇，若是還沒看過 08 篇能夠往這邊走：
[30 天精通 RxJS (08)：簡易拖拽實例 - take, first, takeUntil, concatAll]github.com/ShaofeiZi/3…

今天是美好的聖誕節，先祝讀者們聖誕快樂！
爲了讓你們在聖誕節好好的陪家人，因此今天的文章內容就輕鬆點，讓咱們簡單介紹幾個的 operators 就行了。

Operators

skip

咱們昨天介紹了 take 能夠取前幾個發送的元素，今天介紹能夠略過前幾個發送元素的 operator: skip，示例以下：

var source = Rx.Observable.interval(1000);
var example = source.skip(3);

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});
// 3
// 4
// 5...複製代碼

JSBin | JSFiddle

本來從 0 開始的就會變成從 3 開始，可是記得本來元素的等待時間仍然存在，也就是說此示例第一個取得的元素須要等 4 秒，用 Marble Diagram 表示以下。

source : ----0----1----2----3----4----5--....
                    skip(3)
example: -------------------3----4----5--...複製代碼

takeLast

除了能夠用 take 取前幾個以外，咱們也能夠倒過來取最後幾個，示例以下：

var source = Rx.Observable.interval(1000).take(6);
var example = source.takeLast(2);

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});
// 4
// 5
// complete複製代碼

這裏咱們先取了前 6 個元素，再取最後兩個。因此最後會發送 4, 5, complete，這裏有一個重點，就是 takeLast 必須等到整個 observable 完成(complete)，才能知道最後的元素有哪些，而且同步發送，若是用 Marble Diagram 表示以下

source : ----0----1----2----3----4----5|
                takeLast(2)
example: ------------------------------(45)|複製代碼

這裏能夠看到 takeLast 後，比須等到本來的 observable 完成後，才當即同步發送 4, 5, complete。

last

跟 take(1) 相同，咱們有一個 takeLast(1) 的簡化寫法，那就是 last() 用來取得最後一個元素。

var source = Rx.Observable.interval(1000).take(6);
var example = source.last();

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});
// 5
// complete複製代碼

用 Marble Diagram 表示以下

source : ----0----1----2----3----4----5|
                    last()
example: ------------------------------(5)|複製代碼

concat

concat 能夠把多個 observable 實例合併成一個，示例以下

var source = Rx.Observable.interval(1000).take(3);
var source2 = Rx.Observable.of(3)
var source3 = Rx.Observable.of(4,5,6)
var example = source.concat(source2, source3);

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});
// 0
// 1
// 2
// 3
// 4
// 5
// 6
// complete複製代碼

JSBin | JSFiddle

跟 concatAll 同樣，必須先等前一個 observable 完成(complete)，纔會繼續下一個，用 Marble Diagram 表示以下。

source : ----0----1----2|
source2: (3)|
source3: (456)|
            concat()
example: ----0----1----2(3456)|複製代碼

另外 concat 還能夠看成靜態方法使用

var source = Rx.Observable.interval(1000).take(3);
var source2 = Rx.Observable.of(3);
var source3 = Rx.Observable.of(4,5,6);
var example = Rx.Observable.concat(source, source2, source3);

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});複製代碼

JSBin | JSFiddle

startWith

startWith 能夠在 observable 的一開始塞要發送的元素，有點像 concat 但參數不是 observable 而是要發送的元素，使用示例以下

var source = Rx.Observable.interval(1000);
var example = source.startWith(0);

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});
// 0
// 0
// 1
// 2
// 3...複製代碼

這裏能夠看到咱們在 source 的一開始塞了一個 0，讓 example 會在一開始就當即發送 0，用 Marble Diagram 表示以下

source : ----0----1----2----3--...
                startWith(0)
example: (0)----0----1----2----3--...複製代碼

記得 startWith 的值是一開始就同步發出的，這個 operator 很常被用來保存程序的起始狀態！

merge

merge 跟 concat 同樣都是用來合併 observable，但他們在行爲上有很是大的不一樣！

讓咱們直接來看例子吧

var source = Rx.Observable.interval(500).take(3);
var source2 = Rx.Observable.interval(300).take(6);
var example = source.merge(source2);

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});
// 0
// 0
// 1
// 2
// 1
// 3
// 2
// 4
// 5
// complete複製代碼

JSBin | JSFiddle

上面能夠看得出來，merge 把多個 observable 同時處理，這跟 concat 一次處理一個 observable 是徹底不同的，因爲是同時處理行爲會變得較爲複雜，這裏咱們用 Marble Diagram 會比較好解釋。

source : ----0----1----2|
source2: --0--1--2--3--4--5|
            merge()
example: --0-01--21-3--(24)--5|複製代碼

這裏能夠看到 merge 以後的 example 在時間序上同時在跑 source 與 source2，當兩件事情同時發生時，會同步發送資料(被 merge 的在後面)，當兩個 observable 都結束時纔會真的結束。

merge 一樣能夠看成靜態方法用

var source = Rx.Observable.interval(500).take(3);
var source2 = Rx.Observable.interval(300).take(6);
var example = Rx.Observable.merge(source, source2);

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});複製代碼

merge 的邏輯有點像是 OR(||)，就是當兩個 observable 其中一個被觸發時均可以被處理，這很經常使用在一個以上的按鈕具備部分相同的行爲。

例如一個影片播放器有兩個按鈕，一個是暫停(II)，另外一個是結束播放(口)。這兩個按鈕都具備相同的行爲就是影片會被中止，只是結束播放會讓影片回到 00 秒，這時咱們就能夠把這兩個按鈕的事件 merge 起來處理影片暫停這件事。

var stopVideo = Rx.Observable.merge(stopButton, endButton);

stopVideo.subscribe(() => {
    // 暫停播放影片
})複製代碼

今日小結

今天介紹的六個 operators 都是平時很容易用到的，咱們以後的示例也有機會再遇到。但願讀者們能本身試試這些方法，以後使用時會比較有印象！

不知道讀者今天有沒有收穫呢？ 若是有任何問題，歡迎在下方留言給我，謝謝。