RxJS 中使用 startWith 操作符设置初始值

RxJS 中使用 startWith 操作符设置初始值

在 RxJS 中，startWith 操作符是一个非常常用的操作符，它的作用是在 Observable 流中添加一个初始值。这个初始值可以是任何值，包括基本类型、对象、数组等等。在实际开发中，我们经常需要在一个 Observable 流中添加一个初始值，然后再继续把其他的值添加到这个流中。

下面我们来看一下如何使用 startWith 操作符来设置一个初始值。

1. 引入 RxJS 库

首先，我们需要在项目中引入 RxJS 库。在这里，我们以使用 npm 安装 RxJS 为例：

npm install rxjs --save

1. 创建一个 Observable 流

接下来，我们需要创建一个 Observable 流。在这里，我们以创建一个简单的数字流为例：

import { of } from 'rxjs';

const number$ = of(1, 2, 3, 4, 5);

1. 使用 startWith 操作符设置初始值

现在，我们可以使用 startWith 操作符来设置一个初始值。在这里，我们以设置数字 0 为初始值为例：

import { of } from 'rxjs';
import { startWith } from 'rxjs/operators';

const number$ = of(1, 2, 3, 4, 5).pipe(
  startWith(0)
);

在这个例子中，我们使用了管道操作符 pipe 来把 startWith 操作符添加到 Observable 流中。startWith 操作符的参数是我们要设置的初始值，即数字 0。

1. 订阅 Observable 流

最后，我们需要订阅这个 Observable 流，以便能够获取这个流中的值。在这里，我们以使用 console.log 打印流中的值为例：

import { of } from 'rxjs';
import { startWith } from 'rxjs/operators';

const number$ = of(1, 2, 3, 4, 5).pipe(
  startWith(0)
);

number$.subscribe(value => console.log(value));

在这个例子中，我们使用 subscribe 方法来订阅这个 Observable 流，并使用 console.log 打印流中的值。运行这个例子后，我们可以看到输出结果为：

0
1
2
3
4
5

从输出结果中可以看出，在使用了 startWith 操作符后，流中的第一个值变成了我们设置的初始值。

总结

在实际开发中，我们经常需要在一个 Observable 流中添加一个初始值。使用 startWith 操作符可以很方便地实现这个功能。在使用 startWith 操作符时，需要注意的是，它会把初始值添加到流的第一个位置，因此在订阅这个流时，第一个值将会是这个初始值。

示例代码

完整的示例代码如下：

import { of } from 'rxjs';
import { startWith } from 'rxjs/operators';

const number$ = of(1, 2, 3, 4, 5).pipe(
  startWith(0)
);

number$.subscribe(value => console.log(value));

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65db72521886fbafa4873b10