RxJS - 運算子
運算子是 RxJS 中的重要組成部分。運算子是一個純函式,它接收 Observable 作為輸入,輸出也是一個 Observable。
使用運算子
運算子是一個純函式,它接收 Observable 作為輸入,輸出也是一個 Observable。
要使用運算子,我們需要一個 pipe() 方法。
使用 pipe() 的示例
let obs = of(1,2,3); // an observable obs.pipe( operator1(), operator2(), operator3(), operator3(), )
在上面的示例中,我們使用 of() 方法建立了一個 Observable,該方法接收值 1、2 和 3。現在,您可以使用 pipe() 方法對該 Observable 執行不同的操作,如上所示。運算子的執行將按順序在給定的 Observable 上進行。
下面是一個工作示例 -
import { of } from 'rxjs';
import { map, reduce, filter } from 'rxjs/operators';
let test1 = of(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
let case1 = test1.pipe(
filter(x => x % 2 === 0),
reduce((acc, one) => acc + one, 0)
)
case1.subscribe(x => console.log(x));
輸出
30
在上面的示例中,我們使用了 filter 運算子,它過濾偶數,然後我們使用了 reduce() 運算子,它將對偶數值進行加和,並在訂閱時給出結果。
以下列出我們將要討論的 Observables。
- 建立
- 數學
- 連線
- 轉換
- 過濾
- 實用工具
- 條件
- 多播
- 錯誤處理
建立運算子
以下是我們將要討論的建立運算子類別中的運算子 -
| 序號 | 運算子 & 描述 |
|---|---|
| 1 |
ajax
此運算子將為給定的 URL 發出 ajax 請求。 |
| 2 |
from
此運算子將從陣列、類似陣列的物件、Promise、可迭代物件或類似 Observable 的物件建立 Observable。 |
| 3 |
fromEvent
此運算子將輸出一個 Observable,該 Observable 用於在元素上發出事件,例如按鈕、點選等。 |
| 4 |
fromEventPattern
此運算子將從用於註冊事件處理程式的輸入函式建立 Observable。 |
| 5 |
interval
此運算子將為給定時間內的每次時間建立一個 Observable。 |
| 6 |
of
此運算子將接收傳遞的引數並將它們轉換為 Observable。 |
| 7 |
range
此運算子將建立一個 Observable,它將根據提供的範圍為您提供一系列數字。 |
| 8 |
throwError
此運算子將建立一個 Observable,該 Observable 將通知錯誤。 |
| 9 |
timer
此運算子將建立一個 Observable,該 Observable 將在超時後發出值,並且每次呼叫後該值將繼續增加。 |
| 10 |
iif
此運算子將決定訂閱哪個 Observable。 |
數學運算子
以下是我們將要討論的數學運算子類別中的運算子 -
| 序號 | 運算子 & 描述 |
|---|---|
| 1 |
Count
count() 運算子接收具有值的 Observable,並將其轉換為將給出單個值的 Observable |
| 2 |
Max
Max 方法將接收具有所有值的 Observable,並返回具有最大值的 Observable |
| 3 |
Min
Min 方法將接收具有所有值的 Observable,並返回具有最小值的 Observable。 |
| 4 |
Reduce
在 reduce 運算子中,累加器函式用於輸入 Observable,累加器函式將以 Observable 的形式返回累加值,並可選地將種子值傳遞給累加器函式。 reduce() 函式將接收 2 個引數,一個累加器函式,第二個是種子值。 |
連線運算子
以下是我們將要討論的連線運算子類別中的運算子。
| 序號 | 運算子 & 描述 |
|---|---|
| 1 |
concat
此運算子將按順序發出作為輸入給定的 Observable,然後繼續下一個。 |
| 2 |
forkJoin
此運算子將接收陣列或字典物件作為輸入,並將等待 Observable 完成,並返回從給定 Observable 發出的最後一個值。 |
| 3 |
merge
此運算子將接收輸入 Observable,併發出來自 Observable 的所有值,併發出一個輸出 Observable。 |
| 4 |
race
它將返回一個 Observable,該 Observable 將是第一個源 Observable 的映象副本。 |
轉換運算子
以下是我們將要討論的轉換運算子類別中的運算子。
| 序號 | 運算子 & 描述 |
|---|---|
| 1 |
buffer
buffer 對 Observable 進行操作,並接收 Observable 作為引數。它將在陣列中開始緩衝其原始 Observable 上發出的值,並在作為引數的 Observable 發出時發出相同的值。一旦作為引數的 Observable 發出,緩衝區將重置並再次開始在原始上緩衝,直到輸入 Observable 發出,並且相同的場景重複。 |
| 2 |
bufferCount
在 buffercount() 運算子的情況下,它將收集其呼叫的 Observable 上的值,並在給定給 buffercount 的緩衝區大小匹配時發出相同的值。 |
| 3 |
bufferTime
這類似於 bufferCount,因此,它將收集其呼叫的 Observable 上的值,並在完成 bufferTimeSpan 時發出緩衝區。它接收 1 個引數,即 bufferTimeSpan。 |
| 4 |
bufferToggle
在 bufferToggle() 的情況下,它接收 2 個引數,openings 和 closingSelector。opening 引數是可訂閱的或 Promise 以啟動緩衝區,第二個引數 closingSelector 又是可訂閱的或 Promise,表示關閉緩衝區併發出收集的值的指示符。 |
| 5 |
bufferWhen
此運算子將以陣列形式給出值,它接收一個函式作為引數,該函式將決定何時關閉、發出和重置緩衝區。 |
| 6 |
expand
expand 運算子接收一個函式作為引數,該函式遞迴地應用於源 Observable 以及輸出 Observable。最終值為 Observable。 |
| 7 |
groupBy
在 groupBy 運算子中,輸出根據特定條件進行分組,這些組專案作為 GroupedObservable 發出。 |
| 8 |
map
在 map 運算子的情況下,投影函式應用於源 Observable 上的每個值,並且相同輸出作為 Observable 發出。 |
| 9 |
mapTo
每次源 Observable 發出值時,都會輸出一個常數值以及 Observable。 |
| 10 |
mergeMap
在 mergeMap 運算子的情況下,投影函式應用於每個源值,並且其輸出與輸出 Observable 合併。 |
| 11 |
switchMap
在 switchMap 運算子的情況下,投影函式應用於每個源值,並且其輸出與輸出 Observable 合併,並且給定的值為最新的投影 Observable。 |
| 12 |
window
它接收一個引數 windowboundaries,它是一個 Observable,並且每當給定的 windowboundaries 發出時,它都會返回一個巢狀的 Observable |
過濾運算子
以下是我們將要討論的過濾運算子類別中的運算子。
| 序號 | 運算子 & 描述 |
|---|---|
| 1 |
debounce
一段時間後,源 Observable 發出的值,並且發射由作為 Observable 或 Promise 給出的另一個輸入確定。 |
| 2 |
debounceTime
它將僅在時間完成後從源 Observable 發出值。 |
| 3 |
distinct
此運算子將給出來自源 Observable 的所有與前一個值相比不同的值。 |
| 4 |
elementAt
此運算子將根據給定的索引從源 Observable 給出一個值。 |
| 5 |
filter
此運算子將根據給定的謂詞函式過濾來自源 Observable 的值。 |
| 6 |
first
此運算子將給出源 Observable 發出的第一個值。 |
| 7 |
last
此運算子將給出源 Observable 發出的最後一個值。 |
| 8 |
ignoreElements
此運算子將忽略來自源 Observable 的所有值,並且僅執行對 complete 或 error 回撥函式的呼叫。 |
| 9 |
sample
此運算子將給出來自源 Observable 的最新值,並且輸出將取決於傳遞給它的引數發出。 |
| 10 |
skip
此運算子將返回一個 Observable,該 Observable 將跳過作為輸入接收的前 count 個專案的第一次出現。 |
| 11 |
throttle
此運算子將輸出並忽略來自源 Observable 的值,持續時間由作為引數接收的輸入函式確定,並且將重複相同的過程。 |
實用工具運算子
以下是我們將要討論的實用工具運算子類別中的運算子。
| 序號 | 運算子 & 描述 |
|---|---|
| 1 |
tap
此運算子的輸出與源 Observable 相同,可用於從 Observable 向用戶記錄值。主要值、錯誤(如果有)或任務是否完成。 |
| 2 |
delay
此運算子根據給定的超時延遲源 Observable 發出的值。 |
| 3 |
delayWhen
此運算子根據來自作為輸入接收的另一個 Observable 的超時延遲源 Observable 發出的值。 |
| 4 |
observeOn
此運算子基於輸入排程器將重新發出來自源 Observable 的通知。 |
| 5 |
subscribeOn
此運算子有助於基於作為輸入接收的排程器非同步訂閱源 Observable。 |
| 6 |
timeInterval
此運算子將返回一個物件,該物件包含當前值以及使用接收的排程器輸入計算的當前值和前一個值之間經過的時間。 |
| 7 |
timestamp
返回來自源 Observable 的發出的值以及時間戳,該時間戳指示值發出時的時間。 |
| 8 |
timeout
如果源 Observable 在給定的超時後未發出值,則此運算子將引發錯誤。 |
| 9 |
toArray
累積來自 Observable 的所有源值,並在源完成時將它們作為陣列輸出。 |
條件運算子
以下是我們將要討論的條件運算子類別中的運算子。
| 序號 | 運算子 & 描述 |
|---|---|
| 1 |
defaultIfEmpty
如果源 Observable 為空,此運算子將返回一個預設值。 |
| 2 |
every
它將根據輸入函式是否滿足源 Observable 上每個值的條件返回一個 Observable。 |
| 3 |
find
當源 Observable 的第一個值滿足作為輸入的謂詞函式的條件時,這將返回該 Observable。 |
| 4 |
findIndex
此運算子基於輸入排程器將重新發出來自源 Observable 的通知。 |
| 5 |
isEmpty
如果輸入 Observable 在不發出任何值的情況下執行完成回撥,此運算子將輸出 true;如果輸入 Observable 發出了任何值,則輸出 false。 |
多播運算子
以下是我們將在此多播運算子類別中討論的運算子。
| 序號 | 運算子 & 描述 |
|---|---|
| 1 |
multicast
multicast 運算子共享為其他訂閱者建立的單個訂閱。multicast 接收的引數是一個 Subject 或一個返回 ConnectableObservable 的工廠方法,該方法具有 connect() 方法。要訂閱,必須呼叫 connect() 方法。 |
| 2 |
publish
此運算子返回 ConnectableObservable,需要使用 connect() 方法訂閱 Observable。 |
| 3 |
publishBehavior
publishBehaviour 使用 BehaviourSubject,並返回 ConnectableObservable。必須使用 connect() 方法訂閱建立的 Observable。 |
| 4 |
publishLast
publishBehaviour 使用 AsyncSubject,並返回 ConnectableObservable。必須使用 connect() 方法訂閱建立的 Observable。 |
| 5 |
publishReplay
publishReplay 使用行為主題,它可以緩衝值並將相同的值重放給新的訂閱者,並返回 ConnectableObservable。必須使用 connect() 方法訂閱建立的 Observable。 |
| 6 |
share
它是 mutlicast() 運算子的別名,唯一的區別是您不必手動呼叫 connect() 方法來啟動訂閱。 |
錯誤處理運算子
以下是我們將在此錯誤處理運算子類別中討論的運算子。
| 序號 | 運算子 & 描述 |
|---|---|
| 1 |
catchError
此運算子負責透過返回一個新的 Observable 或錯誤來捕獲源 Observable 上的錯誤。 |
| 2 |
retry
如果源 Observable 出現錯誤,此運算子將負責重新嘗試源 Observable,並且重試將根據給定的輸入計數進行。 |