RxJS 中的 skipWhile 与 skipUntil 操作符的区别及用法

介绍

在 RxJS 的操作符中，有两个很相似的操作符，分别是 skipWhile 和 skipUntil。这两个操作符都可以用来过滤掉一些不需要的事件，但是它们的用法和作用却有一些区别。

skipWhile

skipWhile 操作符可以用来跳过一些满足条件的事件。它的使用方法如下：

const source = Rx.Observable.from([1, 2, 3, 4, 5]);
const example = source
  .skipWhile(val => val < 3)
  .subscribe(val => console.log(val));

在上面的示例中，我们从 1 到 5 的数字序列中创建了一个 Observable 对象，然后通过 skipWhile 操作符跳过了小于 3 的数字，最后打印出剩下的数字。

需要注意的是，skipWhile 操作符会持续跳过事件，直到遇到不满足条件的事件为止。因此在上面的示例中，事件 3、4、5 都满足条件，会被跳过，只有当遇到事件 5 时，它不再满足条件，于是输出结果为：

3
4
5

skipUntil

skipUntil 操作符则是用来跳过一些在另一个 Observable 对象发出事件前的事件。它的使用方法如下：

const source = Rx.Observable.interval(1000);
const example = source
  .skipUntil(Rx.Observable.timer(5000))
  .subscribe(val => console.log(val));

在上面的示例中，我们先从一个每秒发出一次事件的 Observable 对象中创建了一个 Observable 对象，然后通过 skipUntil 操作符指定一个定时器 Observable 对象，告诉程序需要跳过这个定时器 Observable 发出事件前的事件。因此在示例中，我们会看到从第 5 秒开始每秒输出一次数字：

4
5
6
7
...

需要注意的是，由于 skipUntil 操作符会一直等待指定的 Observable 发出事件，因此如果这个 Observable 永远不发出事件，那么 skipUntil 操作符将永远不会跳过任何事件。

总结

skipWhile 和 skipUntil 操作符都是用来过滤事件的操作符，但是它们的使用场景不同。skipWhile 操作符用来跳过满足条件的事件，直到遇到不满足条件的事件为止；而 skipUntil 操作符则是用来跳过在另一个 Observable 发出事件前的事件。在实际应用中，我们需要仔细考虑自己的需求，选择合适的操作符来进行过滤。

参考代码

const source = Rx.Observable.from([1, 2, 3, 4, 5]);
const example1 = source
  .skipWhile(val => val < 3)
  .subscribe(val => console.log(val));

const source2 = Rx.Observable.interval(1000);
const example2 = source2
  .skipUntil(Rx.Observable.timer(5000))
  .subscribe(val => console.log(val));

参考链接

• RxJS 官方文档
• RxJS 官方文档

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