RxJS 源码解析——第二篇：奇妙的变量 operator

前言

大家好，我是清风 ，欢迎来到 RxJS 源码解析的第二篇文章。在上一篇文章中，我们介绍了 RxJS 中的创建操作符。这些操作符可以用来创建一个新的 Observable。在本文中，我们将介绍 RxJS 中的变量操作符。这些操作符可以用来修改 Observable 发出的数据。

变量 operator

变量 operator 处理的是数据流本身，它们一般以流作为输入，也以流作为输出。 RxJS 中的变量 operator 非常的丰富，本文就为大家一一讲解。

map

map 操作符用于将 Observable 中的每一项数据都映射成一个新的值。它接收一个转换函数作为参数，该函数将被应用于 Observable 中的每一项数据。转换函数可以是一个简单的函数，也可以是一个复杂的函数。下面是一个简单的例子：

const observable = Rx.Observable.of(1, 2, 3);

observable.map(x => x * 2)
  .subscribe(x => console.log(x));

这个例子中，map 操作符将 Observable 中的每一项数据都乘以 2。输出结果为：

2
4
6

filter

filter 操作符用于从 Observable 中过滤掉不满足条件的数据。它接收一个谓词函数作为参数，该函数将被应用于 Observable 中的每一项数据。如果谓词函数返回 true，则该数据将被保留在 Observable 中。否则，该数据将被过滤掉。下面是一个简单的例子：

const observable = Rx.Observable.of(1, 2, 3, 4, 5);

observable.filter(x => x % 2 === 0)
  .subscribe(x => console.log(x));

这个例子中，filter 操作符将 Observable 中的所有偶数都过滤掉了。输出结果为：

2
4

debounceTime

debounceTime 操作符用于抑制 Observable 中的数据发射。它接收一个时间间隔作为参数，该时间间隔指定了在发出下一个数据之前需要等待多长时间。如果在时间间隔内没有新的数据发出，则最后一个数据将被发出。下面是一个简单的例子：

const observable = Rx.Observable.interval(1000);

observable.debounceTime(500)
  .subscribe(x => console.log(x));

这个例子中，debounceTime 操作符将 Observable 中的数据发射抑制了 500 毫秒。输出结果为：

0
1
2
3
4

delay

delay 操作符用于延迟 Observable 中的数据发射。它接收一个时间间隔作为参数，该时间间隔指定了在发出数据之前需要等待多长时间。下面是一个简单的例子：

const observable = Rx.Observable.of(1, 2, 3);

observable.delay(1000)
  .subscribe(x => console.log(x));

这个例子中，delay 操作符将 Observable 中的数据发射延迟了 1 秒。输出结果为：

1
2
3

distinctUntilChanged

distinctUntilChanged 操作符用于从 Observable 中过滤掉连续重复的数据。它接收一个比较函数作为参数，该函数将被应用于 Observable 中的每一项数据。如果比较函数返回 false，则该数据将被保留在 Observable 中。否则，该数据将被过滤掉。下面是一个简单的例子：

const observable = Rx.Observable.of(1, 1, 2, 2, 3, 3);

observable.distinctUntilChanged()
  .subscribe(x => console.log(x));

这个例子中，distinctUntilChanged 操作符将 Observable 中的所有重复数据都过滤掉了。输出结果为：

1
2
3

first

first 操作符用于从 Observable 中取出第一项数据。它接收一个可选的谓词函数作为参数，该函数将被应用于 Observable 中的第一项数据。如果谓词函数返回 true，则该数据将被发出。否则，该数据将被丢弃。下面是一个简单的例子：

const observable = Rx.Observable.of(1, 2, 3);

observable.first()
  .subscribe(x => console.log(x));

这个例子中，first 操作符将 Observable 中的第一项数据发出。输出结果为：

1

last

last 操作符用于从 Observable 中取出最后