Rx*(Observable.combineLatest)方法

方法定義

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

作用

通過處理函數總是將指定的可觀察對象序列中最新發射的值合并為一個可觀察對象。

參數

args (arguments | Array): 一系列可觀察對象或可觀察對象的數組。

[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用戶的就是上面提到的場景。

劇終

總結

以上是生活随笔為你收集整理的RxJS API解析（四）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。