RxJS API解析（四）

Rx*(Observable.combineLatest)方法

方法定义

Rx.Observable.combineLatest(...args, [resultSelector])

作用

通过处理函数总是将指定的可观察对象序列中最新发射的值合并为一个可观察对象。

参数

1. args (arguments | Array): 一系列可观察对象或可观察对象的数组。

2. [resultSelector] (Function): 在所有可观察对象都发射值后调用的处理函数。

返回值

(Observable): 由传入的可观察序列经过处理函数合并后的结果组成的可观察序列。

宝珠图

Observable.combineLastest()函数，总是合并序列中最新发射的值。宝珠图中的颜色球发射颜色，空白的图形发射待染色图形，处理函数对待染色对象进行染色：总是用户最新发射的颜色或者对最新发射的待染色对象。

假设颜色序列仅发射了第一个宝珠浅紫色且后续不再发射，那么结果街将会是一个由浅紫色组成的染色后对象的序列。

使用官方可拖动宝珠图，可以帮助理解，拖动序列中的宝珠，观察输出序列的变化。

实例

var colors = ["紫色","黄色","蓝色","黑色"];
var shapes = ["小星星","圆形","三角形","正方形","心形","五边形"];
var source1 = Rx.Observable.interval(3000)
  .map(()=>colors.pop());
var source2 = Rx.Observable.interval(2000)
  .map(()=>shapes.pop());

var combined = Rx.Observable.combineLatest(source1, source2, function(x, y){
  return x + "的" + y;
}).take(8);

combined.subscribe((shaped)=>console.log(shaped));

实例模拟第一个宝珠图，点击进入可运行实例。其中列1发射颜色值，序列2发射形状。结果输出染色后的形状：

"黑色的五边形"
"黑色的心形"
"蓝色的心形"
"蓝色的正方形"
"蓝色的三角形"
"黄色的三角形"
"黄色的圆形"
"紫色的圆形"

还有一个非常好的实例在前面的文章中，是combineLatest()在缓存数据方面的应用，如果你想深入理解combineLatest()不妨看一下。

题外话

写这个专题的时候，对Rx的抽象能力赞叹不已。

大家通常把编写一个框架的工作称作“造轮子”。
“轮子”是一个针对某一类问题的解决方案，通常是由于反复解决某一个工程问题而产生的。某种程度上，轮子可以一劳永逸，同时轮子的使用可以大大地提高生产的效率(试想想你在使用如Rails这类有 ORM特性框架时的感受)。

Rx似乎从另一个方面而不是实际问题进行抽象——数学，是一个函数式编程模式。从数学而不是工程作为起点，创造的工具的威力_可能_更强大，但是学习成本(使用成本)_可能_会更高。

任何程序设计语言在讲解递归特性时，基本都会举汉诺塔、斐波拉契数列的例子。没错，请你对比一下斐波拉契数列和combineLatest()定义的相似之处：

def fibo(i):  
   if i==0 or i==1:  
       return 1  
   else:  
       return fibo(i-1)+fibo(i-2)

Oops！递归完成后产生值的过程就是combineLatest()的过程。

在学习Rx的操作符时，请反复地理解操作符的作用、限制。最好的理解方法是构建一个场景。

在combineLatest()中，我们不妨将场景限定为拥有两个可观察对象的可观察序列，并且对象A总是较低频率地发射新值，而对象B比较频繁地发射：

A ----*----------------*---------->
B -----@---@---@---@---@----@----->

那么对象A在实际中可能是什么？缓存后的http请求后的数据、异步获取的配置文件...
对象B自然可以是，与服务器的实时同步、用户上传图片的实时上传、用户在列表中执行的翻页操作...

前面的文章中缓存Github用户的就是上面提到的场景。

剧终