如何理解RXJS（2）——operators的使用

最新推荐文章于 2023-02-07 09:49:51 发布

chenxuan6647

最新推荐文章于 2023-02-07 09:49:51 发布

阅读量132

点赞数

原文链接：https://my.oschina.net/u/3724328/blog/1584364

版权

在上一节中，我们讨论了observable的工作原理和创建过程，那么在这一节中，我们来介绍observable类所具有的一系列方法，通过这些方法，我们可以更加灵活地使用observable变量。

Operators的使用 Operators是observable类拥有的一系列public method，本节我们通过实际代码来演练一些常用的operator，并看看他们输出的结果。

1.map

map方法的作用是对每个observable对象发出的值，根据一定的规则进行映射。如下：

source_from = Observable.from('123').map(x => x + 's ');

可以得到结果

map

类似的还有mapTo方法，可以将发出的值映射为固定值。

2.zip

zip方法可以将两个observable序列合并为一个observable序列。如下

source_from = Observable.from('123');
  source_interval = Observable.interval(1000);
  source_zip = this.source_from.zip(this.source_interval, (x, y) => x);

通过以上方法，就可以将interval和from方法进行结合，1、2、3会在相隔1s后相继输出，再输出complete。

3.scan

scan方法类似于reduce方法，对发出的值进行accumulation的处理。如下：

source_from = Observable.from('Andrew');
  source_interval = Observable.interval(1000);
  source_zip = this.source_from.zip(this.source_interval, (x, y) => x);
  source_scan = this.source_zip.scan((origin, next) => origin + next, 's');

可以得到这样的输出结果：

scan

4.filter

filter方法可以对发出的值进行过滤操作，并制定过滤条件。如下：

source_from = Observable.from([1, 2, 3, 4, 5, 6, 7]);
  source_interval = Observable.interval(1000);
  source_zip = this.source_from.zip(this.source_interval, (x, y) => x);
  source_filter = this.source_zip.filter((x) => x % 2 !== 0);

则可以看到如下的输出：

filter

5.take

take方法可以制定观察者接收到的值的数量，在达到指定数量后，则会调用观察者的complete方法。

source_from = Observable.from([1, 2, 3, 4, 5, 6, 7]);
  source_interval = Observable.interval(1000);
  source_zip = this.source_from.zip(this.source_interval, (x, y) => x);
  source_filter = this.source_zip.take(3);

则可以得到如下的输出：

输入图片说明

6.distinct

distinct可以对一系列发送的值进行去重操作。

source_from = Observable.from([1, 2, 2, 6, 5, 6, 7, 4, 4]);
  source_interval = Observable.interval(1000);
  source_zip = this.source_from.zip(this.source_interval, (x, y) => x);
  source_distinct = this.source_zip.distinct();

那么可以得到这样的输出：

输入图片说明