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,并且重试将根据给定的输入计数进行。 |