RxJS是一款被广泛使用的JavaScript响应式编程库，它提供了一组强大的操作符来帮助我们处理异步事件流。其中，take、takeUntil和takeWhile三个操作符拥有广泛的实际应用场景。本文将介绍这三个操作符的用法。
take操作符
take操作符用来从流中获取前N个值。其语法如下：
stream$.pipe(take(N));
其中，stream$指的是一个Observable对象，N则是表示获取前N个值。
例如，以下代码会从一个Observable对象中获取前5个值：
const { interval } = Rx;
const { take } = Rx.operators;
const stream$ = interval(1000);
stream$.pipe(
take(5)
).subscribe(console.log);输出结果为：
0 1 2 3 4
takeUntil操作符
takeUntil操作符用来在接收到一个特定的事件后停止从流中获取值。其语法如下：
stream$.pipe(takeUntil(notifier$));
其中，stream$表示一个Observable对象，notifier$则表示一个可观察的对象，当接收到它的第一个值时，takeUntil操作符就会停止获取stream$对象中的流。
例如，以下代码会从一个interval(1000)的流中获取前5个值，并在接收到一个interval(5000)的值后停止获取：
// javascriptcn.com 代码示例
const { interval } = Rx;
const { take, takeUntil } = Rx.operators;
const stream$ = interval(1000);
const notifier$ = interval(5000);
stream$.pipe(
take(5),
takeUntil(notifier$)
).subscribe(console.log);输出结果为：
0 1 2 3 4
takeWhile操作符
takeWhile操作符用来取流中满足某个条件的值，在第一次不满足该条件时停止获取。其语法如下：
stream$.pipe(takeWhile(predicate));
其中，stream$表示一个Observable对象，predicate则是一个判断条件的函数。当流中的值满足predicate函数的条件时，takeWhile会将这些值都获取到；一旦流中的某个值不满足predicate函数的条件时，takeWhile就会停止获取。
例如，以下代码会从一个interval(1000)的流中获取前5个小于3的值：
const { interval } = Rx;
const { takeWhile } = Rx.operators;
const stream$ = interval(1000);
stream$.pipe(
takeWhile(value => value < 3)
).subscribe(console.log);输出结果为：
0 1 2
总结
在需要获取前N个值、停止获取、或仅获取满足某个条件的值时，take、takeUntil和takeWhile操作符是非常好用的。以下是一个完整的示例代码：
// javascriptcn.com 代码示例
const { interval } = Rx;
const { take, takeUntil, takeWhile } = Rx.operators;
const stream$ = interval(1000);
const notifier$ = interval(5000);
stream$.pipe(
take(5),
takeUntil(notifier$),
takeWhile(value => value < 3)
).subscribe(console.log);输出结果为：
0 1 2
我们可以看出，在原有的基础上，这三个操作符可以很好地协调使用，为我们处理异步事件流提供了方便的解决之道。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653391fc7d4982a6eb71f7a4