本文核心内容转载自https://blog.jerry-hong.com/series/rxjs/thirty-days-RxJS-09
原源代码用的Rxjs v5, 为了本人自己学习，参考官网改为v7版本
Operators
skip
我们昨天介绍了take可以取前几个送出的元素，今天介绍可以略过前几个送出元素的operator: skip，范例如下：
const source = interval(1000);
const example = source.skip(3);
example.subscribe({
next: (value) => { console.log(value); },
error: (err) => { console.log('Error: ' + err); },
complete: () => { console.log('complete'); }
});
// 3
// 4
// 5...
原本从0 开始的就会变成从3 开始，但是记得原本元素的等待时间仍然存在，也就是说此范例第一个取得的元素需要等4 秒，用Marble Diagram 表示如下。
source : ----0----1----2----3----4----5--....
skip(3)
example: -------------------3----4----5--...
takeLast
除了可以用take 取前几个之外，我们也可以倒过来取最后几个，范例如下：
var source = 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 = 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 = interval(1000).take(3);
var source2 = of(3)
var source3 = 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
跟concatAll一样，必须先等前一个observable 完成(complete)，才会继续下一个，用Marble Diagram 表示如下。
source : ----0----1----2|
source2: (3)|
source3: (456)|
concat()example: ----0----1----2(3456)|
另外concat 还可以当作静态方法使用
var source = interval(1000).take(3);
var source2 = of(3);var source3 = of(4,5,6);
var example =concat(source,source2,source3);
example.subscribe({
next: (value) => { console.log(value); },
error: (err) => { console.log('Error: ' + err); },
complete: () => { console.log('complete'); }
});
startWith
startWith可以在observable 的一开始塞要发送的元素，有点像concat但参数不是observable 而是要发送的元素，使用范例如下
var source = 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 = interval(500).take(3);
var source2 = 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
上面可以看得出来，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 = interval(500).take(3);
var source2 = interval(300).take(6);
var example = 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 = merge(stopButton,endButton);
stopVideo.subscribe(() => {
// 暫停播放影片
})
今日小结
今天介绍的六个operators 都是平时很容易用到的，我们之后的范例也有机会再遇到。希望读者们能自己试试这些方法，之后使用时会比较有印象！
