將每個(gè)源值投影到同一個(gè) Observable，該 Observable 在輸出 Observable 中使用 switchMap 多次展平。

輸入一個(gè) Observable，輸出一個(gè) function Operator. 實(shí)際是一個(gè)函數(shù)，每次在源 Observable 上發(fā)出值時(shí)，該函數(shù)都會(huì)返回一個(gè) 新的 Observable.

該函數(shù)從給定的 innerObservable 發(fā)出項(xiàng)目，并且僅從最近投影的內(nèi)部 Observable 中獲取值。

看個(gè)例子：

import { EMPTY, range } from 'rxjs'; import { first, take, tap } from 'rxjs/operators';import { fromEvent, interval } from 'rxjs'; import { switchMapTo } from 'rxjs/operators';const clicks = fromEvent(document, 'click');const test = event => console.log('Jerry: ', event); const result = clicks.pipe(tap(test),switchMapTo(interval(1000)) ); result.subscribe(x => console.log(x));

輸出：

每次點(diǎn)擊之后，click$ 拋出的 PointerEvent，被 switchMapTo 返回的 Function Operator 丟棄了。最后用戶訂閱 result 函數(shù)里，打印的值，是 switchMapTo 輸入的 interval(1000) Observable 發(fā)射的值，而不再是 clicks$ 拋出的 PointerEvent.

再看另一個(gè)在網(wǎng)頁顯示倒計(jì)時(shí)數(shù)字的例子。

import './style.css';import { interval, fromEvent } from 'rxjs'; import {switchMapTo,scan,startWith,takeWhile,finalize } from 'rxjs/operators';const COUNTDOWN_TIME = 10;// reference const countdownElem = document.getElementById('countdown');// streams const click$ = fromEvent(document, 'click'); const countdown$ = interval(2000).pipe(scan((acc, _) => --acc, COUNTDOWN_TIME),startWith(COUNTDOWN_TIME) );click$.pipe(switchMapTo(countdown$),takeWhile(val => val >= -10),finalize(() => (countdownElem.innerHTML = "We're done here!"))).subscribe((val: any) => (countdownElem.innerHTML = val));

初始整數(shù)是10，每隔2秒鐘減一，減到 -10 時(shí)停止。

思路：觸發(fā)計(jì)數(shù)器開始遞減的操作是點(diǎn)擊屏幕，因此需要使用 fromEvent 來構(gòu)造 Observable ：click$

每隔兩秒鐘執(zhí)行某項(xiàng)操作，因此需要用 interval 構(gòu)造第二個(gè) Observable.

一旦計(jì)數(shù)器啟動(dòng)之后，每隔兩秒鐘需要執(zhí)行遞減操作，因此需要用 switchMapTo，將 click$ 映射成 interval Observable.

之后的值傳遞，就和 click$ 再無任何關(guān)聯(lián)了。

因?yàn)槭沁f減操作，暗示這是一個(gè) stateful 場(chǎng)景，故選用 scan 操作符維護(hù)內(nèi)部狀態(tài)。

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的RxJs SwitchMapTo 操作符之移花接木的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。