原文鏈接: https://netbasal.com/rxjs-six-operators-that-you-must-know-5ed3b6e238a0
本文為 RxJS 中文社區(qū) 翻譯文章，如需轉(zhuǎn)載，請(qǐng)注明出處琅摩，謝謝合作！
如果你也想和我們一起定庵，翻譯更多優(yōu)質(zhì)的 RxJS 文章以奉獻(xiàn)給大家对竣，請(qǐng)點(diǎn)擊【這里】
1. concat
// 模擬 HTTP 請(qǐng)求
const getPostOne$ = Rx.Observable.timer(3000).mapTo({id: 1});
const getPostTwo$ = Rx.Observable.timer(1000).mapTo({id: 2});
Rx.Observable.concat(getPostOne$, getPostTwo$).subscribe(res => console.log(res));
按順序訂閱 Observables难衰，但是只有當(dāng)一個(gè)完成并讓我知道巫玻，然后才會(huì)開(kāi)始下一個(gè)丛忆。
Six-Operators-That-You-Must-Know-Concat.gif
當(dāng)順序很重要時(shí)，使用此操作符大审，例如當(dāng)你需要按順序的發(fā)送 HTTP 請(qǐng)求時(shí)蘸际。
2. forkJoin
forkJoin 是 Rx 版的 Promise.all() 。
const getPostOne$ = Rx.Observable.timer(1000).mapTo({id: 1});
const getPostTwo$ = Rx.Observable.timer(2000).mapTo({id: 2});
Rx.Observable.forkJoin(getPostOne$, getPostTwo$).subscribe(res => console.log(res))
別讓我知道直到所有的 Observables 都完成了徒扶，然后再一次性的給我所有的值。(以數(shù)組的形式)
Six-Operators-That-You-Must-Know-ForkJoin.gif
當(dāng)你需要并行地運(yùn)行 Observables 時(shí)使用此操作符根穷。
3. mergeMap
const post$ = Rx.Observable.of({id: 1});
const getPostInfo$ = Rx.Observable.timer(3000).mapTo({title: "Post title"});
const posts$ = post$.mergeMap(post => getPostInfo$).subscribe(res => console.log(res));
首先姜骡，我們得理解 Observables 世界中的兩個(gè)術(shù)語(yǔ):
- 源 (或外部) Observable - 在本例中就是
post$Observable 。 - 內(nèi)部 Observable - 在本例中就是
getPostInfo$Observable 屿良。
僅當(dāng)內(nèi)部 Obervable 發(fā)出值時(shí)圈澈，通過(guò)合并值到外部 Observable 來(lái)讓我知道。
Six-Operators-That-You-Must-Know-MergeMap.gif
4. pairwise
// 追蹤頁(yè)面滾動(dòng)增量
Rx.Observable
.fromEvent(document, 'scroll')
.map(e => window.pageYOffset)
.pairwise()
.subscribe(pair => console.log(pair)); // pair[1] - pair[0]
當(dāng) Observable 發(fā)出值時(shí)讓我知道尘惧，但還得給我前一個(gè)值康栈。(以數(shù)組的形式)
頁(yè)面滾動(dòng)…
Six-Operators-That-You-Must-Know-Pairwise.gif
從輸入 Observable 的第二個(gè)值開(kāi)始觸發(fā)。
5. switchMap
const clicks$ = Rx.Observable.fromEvent(document, 'click');
const innerObservable$ = Rx.Observable.interval(1000);
clicks$.switchMap(event => innerObservable$)
.subscribe(val => console.log(val));
類(lèi)似于 mergeMap喷橙，但是當(dāng)源 Observable 發(fā)出值時(shí)會(huì)取消內(nèi)部 Observable 先前的所有訂閱 啥么。
在我們的示例中，每次我點(diǎn)擊頁(yè)面的時(shí)贰逾，先前的 interval 訂閱都會(huì)取消悬荣，然后開(kāi)啟一個(gè)新的。
Six-Operators-That-You-Must-Know-SwitchMap.gif
6. combineLatest
const intervalOne$ = Rx.Observable.interval(1000);
const intervalTwo$ = Rx.Observable.interval(2000);
Rx.Observable.combineLatest(
intervalOne$,
intervalTwo$
).subscribe(all => console.log(all));
當(dāng)任意 Observable 發(fā)出值時(shí)讓我知道疙剑，但還要給我其他 Observalbes 的最新值氯迂。(以數(shù)組的形式)
Six-Operators-That-You-Must-Know-CombineLatest.gif
例如當(dāng)你需要處理應(yīng)用中的過(guò)濾器時(shí)践叠，此操作符非常有用。
如果你想了解更多關(guān)于 Observables 的內(nèi)容嚼蚀，可以閱讀我的文章:
