[译]RxJS文档07——Operators 操作符

news/2024/7/2 5:17:36

原文:http://reactivex.io/rxjs/manu...

Operators

RxJS提供的操作符非常有用,尽管Observable是基础对象。
操作符是声明式编程中将复杂的异步代码转变为简单的代码组合的重要措施。

什么是操作符 (operator)?

操作符是Observable类型的一组方法,比如像:.map(...),.filter(...),.merge(...),等等。当方法被调用的时候,他们不会更改已经存在的Observable流实例,而是返回一个新的Observable流的实例,这个新的对象中的订阅逻辑则是建立在第一个Observable流之上的。

一个Operator能够在当前的Observable流基础上创建一个新的Observable流。这是一个纯粹的新处理过程:之前的Observable保持不变。

操作符本质上是能够接收一个Observable流作为输入,并返回一个Observable流作为输出的纯函数。
订阅输出的Observable流也会同时订阅输入的Observable流。
在下面的例子中,我们创建了一个自定义的操作符函数可以将所有输入的值都乘以10,然后输出:


function multiplyByTen(input) {
  var output = Rx.Observable.create(function subscribe(observer) {
    input.subscribe({
      next: (v) => observer.next(10 * v),
      error: (err) => observer.error(err),
      complete: () => observer.complete()
    });
  });
  return output;
}

var input = Rx.Observable.from([1, 2, 3, 4]);
var output = multiplyByTen(input);
output.subscribe(x => console.log(x));

输出为:

10
20
30
40

注意以上的例子中,订阅输出流也会同时订阅输入流的情况。我们称这种现象为:“操作符订阅链”。

实例操作符 vs 静态操作符

什么是实例操作符? 通常提及操作符,我们假定指的都是实例操作符,他们是Observable流的实例方法。
例如,如果multiplyByTen是正式的实例操作符,他将会是这样的:


Rx.Observable.prototype.multiplyByTen = function multiplyByTen() {
  var input = this;
  return Rx.Observable.create(function subscribe(observer) {
    input.subscribe({
      next: (v) => observer.next(10 * v),
      error: (err) => observer.error(err),
      complete: () => observer.complete()
    });
  });
}

实例操作符本质是一个函数,他在内部使用this关键字指代Observable输入流。

注意输入Observable流已经不再作为函数的参数,它被假定为this所指向的对象。下面是我们如何使用实例操作符:


var observable = Rx.Observable.from([1, 2, 3, 4]).multiplyByTen();

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

什么是静态操作符? 有别于实例操作符,静态操作符直接是Observable类的方法。静态操作符函数内部不再使用this,它完全依赖函数的参数。

静态操作符是依赖于Observable类的一组纯函数,通常被用来从头创建Observable流。

最常见的静态操作符类型是所谓的创建操作符。不同于将输入流转换成输出流的操作符,他们不用接收Observable类型的参数,而是接收诸如number类型的参数,就可以创建一道数据流。

一个经典的例子是使用静态操作符interval()。他接收一个数字(而不是Observable流)作为输入参数,之后产生一道Observable流作为输出:


var observable = Rx.Observable.interval(1000 /* number of milliseconds */);

另一个创建操作符的例子是create(),在之前的例子里已经用了很多次。你可以从这里查看所有的创建操作符。

然而,静态操作符们并不仅限于简单创建。一些组合操作符也是静态的,例如merage,combineLates,concat等等。他们可以整合多道输入的Observable流,所以也是非常有意义的静态操作符。


var observable1 = Rx.Observable.interval(1000);
var observable2 = Rx.Observable.interval(400);

var merged = Rx.Observable.merge(observable1, observable2);

珠宝图 Marble diagrams

为了更好的展示操作符是如何工作的,只有文字性的解释是不够的。很多操作符依赖于时间,例如他们可能会使用延迟,取样,节流,又或者去抖等等方式。
画一些图表能很好的说明这些过程。珠宝图就是用来展示这些的图表,他包含输入Observable流,操作符和相关参数,还有输出流。

在珠宝图中,时间的流逝被标为从左到右的水平线,线上的每个值(“珠宝”)代表了Observable流在执行过程中发出的值。

下图你可以看到对珠宝的详解。

image

贯穿本站的文档,我们会广泛的使用珠宝图去解释操作符是如何生效的。在别的场景下他们或许同样有用,例如在whiteboard上或者在单元测试中(作为ASCII图表)。


http://www.niftyadmin.cn/n/3889668.html

相关文章

matlab 把字符串分割,matlab字符分割方法

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼以下是我编的,您给看一下,往下我就不会了。。。。。希望您能帮帮我clear allclose alliimread(C:\Users\lenovo\Desktop\验证码.bmp)jrgb2gray(i)figure(1),imshow(i),title(原始彩色图像)figure,imshow(j),…

创建推送证书

转载:http://jingyan.baidu.com/album/7082dc1c6bb86de40a89bd1a.html?picindex13 1. 首先你想创建推送证书和以前你做真机测试证书一样,需要实现准备一个99$的付费账号.然后登陆苹果开发者网站.

matlab for 比较,如何实现多行列比较的for语句循环?

本帖最后由 lijiaxin0932 于 2015-11-9 15:45 编辑目前只能实现第一列14个字符串的比较,如何实现整个cell的比较?前提假设m行任何一个字符串与n行任何一个字符串相同,则path_sim(m,n)1; 最终得到path_sim矩阵,path_sim应为14X14…

Linux下基础命令(二)

这个总结时间花了挺长时间的,有很多实战方面的知识点,大部分都是关于进程的查询还有杀死的等,还有一个硬链接和软链接的实战等,希望这篇博文对大家有帮助,加油↖(^ω^)↗Linux系统进程管理 进程的属性进程ID&#xff0…

重要网站

简历: http://office.msn.com.cn/List.shtml?catWORD&tag13

JS事件委托和冒泡

利用 JS 事件冒泡动态为元素绑定事件的方法称为事件委托(Event Delegation,也称为“事件代理”),是 JavaScript 中最热门的技术之一。 事件委托就是把原本需要绑定在子元素上的事件(onclick、onkeydown 等)…

iOS多线程编程技术之NSThread、NSOperation、GCD

iOS有三种多线程编程的技术,分别为: (一)NSThread (二)NSOperation (三)GCD 这三种编程方式从上到下,抽象度层次是从低到高的,抽象度越高的使用越简单&am…

php取整v,php取整及四舍五入的例子-php iconv 函数转换gb2312编码时...-php iconv使用要注意的问题_169IT.COM...

php中使用iconv进行编码转换时的写法:iconv( "UTF-8", "gb2312//IGNORE" , $FormValues[a])。ignore 忽略转换时的错误。iconv在转换字符"—"到gb2312时会出错,如果没有ignore参数,所有该字符后面的字符串都无…