RxJS 是一个用于实现响应式编程的 JavaScript 库，它提供了一些强大的工具和操作符，使开发者能够更加简单、高效地使用数据流来构建复杂的应用程序。
其中一个非常实用的操作符就是 startWith，它允许我们在一个 Observable 启动之前向它发送一个初始值，在某些场景下能够大大简化我们的代码。
startWith 操作符的基础用法
startWith 操作符的基础用法非常简单，只需要在创建 Observable 时调用它，并传入你想要添加的初始值即可。
import { of } from 'rxjs';
import { startWith } from 'rxjs/operators';
of(1, 2, 3).pipe(startWith(0)).subscribe(val => console.log(val));
// 输出：0 1 2 3在上面的例子中，我们用 of 操作符创建了一个包含 1、2、3 三个数字的 Observable，然后使用 startWith 添加了一个初始值 0，最终在订阅时输出了 0、1、2、3 这四个数字。
值得注意的是，startWith 操作符不会改变原始 Observable 中的任何值，而只是在它前面添加了一个值。因此，就算你在创建 Observable 时未添加任何元素，使用 startWith 时也会向它添加一个初始值。
import { of } from 'rxjs';
import { startWith } from 'rxjs/operators';
of().pipe(startWith(0)).subscribe(val => console.log(val));
// 输出：0startWith 操作符的高级用法
除了基础的用法之外，startWith 操作符还有一些高级的使用方式，能够让我们更加灵活地处理数据流。
添加多个初始值
在某些场景下，我们可能需要为一个 Observable 添加多个初始值。这个时候，我们只需要在 startWith 中传入多个参数即可。
import { of } from 'rxjs';
import { startWith } from 'rxjs/operators';
of(1, 2, 3).pipe(startWith(-2, -1, 0)).subscribe(val => console.log(val));
// 输出：-2 -1 0 1 2 3使用函数生成初始值
如果我们想要动态生成初始值，我们可以使用一个函数作为 startWith 的参数。这个函数会在 Observable 启动时被调用，返回值即为初始值。
import { of } from 'rxjs';
import { startWith } from 'rxjs/operators';
of(1, 2, 3).pipe(startWith(() => new Date())).subscribe(val => console.log(val));
// 输出：[当前时间] 1 2 3根据条件决定是否添加初始值
我们有时可能需要根据某些条件来决定是否添加初始值。这个时候，我们可以借助 iif() 操作符来实现。
import { of, iif } from 'rxjs';
import { startWith } from 'rxjs/operators';
of(1, 2, 3).pipe(
startWith(iif(() => Math.random() > 0.5, 0))
).subscribe(val => console.log(val));
// 输出：(有 50% 的概率输出) 0 1 2 3上面的代码中，我们使用了 iif 来判断是否添加初始值。如果 Math.random() > 0.5，那么会添加初始值 0；否则不添加任何初始值。
startWith 操作符的指导意义
使用 startWith 操作符可以帮助我们更加方便地处理 Observable，在某些场景下可以大大简化我们的代码。同时，学习 startWith 的高级用法也能够让我们更加灵活地应对不同的需求和问题。
结语
RxJS 是一个非常强大的 JavaScript 库，它为我们提供了丰富的工具和操作符，让我们能够更加高效地使用数据流来构建应用程序。其中 startWith 操作符是一个非常实用的操作符，希望本文能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/678221bd935627c900f8cdb9
