非同步最難的地方在于，當(dāng)有多個(gè)非同步行為同時(shí)觸發(fā)且相互依賴琉历，這時(shí)候我們要處理的邏輯跟狀態(tài)就會(huì)變得極其複雜坠七，甚至程式碼很可能會(huì)在完成的一兩天后就成了 Legacy Code。
昨天我們最后講到了 merge 的用法善已，它的邏輯就像是 OR(||)一樣灼捂，可以把多個(gè) observable 合併且同時(shí)處理，當(dāng)其中任合一個(gè) observable 送出元素時(shí)换团，我們都做相同的處理悉稠。
今天我們要講的三個(gè) operators 則像是 AND(&&) 邏輯，它們都是在多個(gè)元素送進(jìn)來(lái)時(shí)艘包，只輸出一個(gè)新元素的猛，但各自的行為上仍有差異，需要讀者花點(diǎn)時(shí)間思考想虎，建議在頭腦清醒時(shí)閱讀本篇文章卦尊。
Operators
combineLatest
首先我們要介紹的是 combineLatest，它會(huì)取得各個(gè) observable 最后送出的值舌厨，再輸出成一個(gè)值岂却，我們直接看范例會(huì)比較好解釋。
var source = Rx.Observable.interval(500).take(3);
var newest = Rx.Observable.interval(300).take(6);
var example = source.combineLatest(newest, (x, y) => x + y);
example.subscribe({
next: (value) => { console.log(value); },
error: (err) => { console.log('Error: ' + err); },
complete: () => { console.log('complete'); }
});
// 0
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// complete
大家第一次看到這個(gè) output 應(yīng)該都會(huì)很困惑裙椭，我們直接來(lái)看 Marble Diagram 吧躏哩！
source : ----0----1----2|
newest : --0--1--2--3--4--5|
combineLatest(newest, (x, y) => x + y);
example: ----01--23-4--(56)--7|
首先 combineLatest 可以接收多個(gè) observable，最后一個(gè)參數(shù)是 callback function揉燃，這個(gè) callback function 接收的參數(shù)數(shù)量跟合併的 observable 數(shù)量相同扫尺，依照范例來(lái)說(shuō)，因?yàn)槲覀冞@裡合併了兩個(gè) observable 所以后面的 callback function 就接收 x, y 兩個(gè)參數(shù)炊汤，x 會(huì)接收從 source 發(fā)送出來(lái)的值正驻，y 會(huì)接收從 newest 發(fā)送出來(lái)的值。
最后一個(gè)重點(diǎn)就是一定會(huì)等兩個(gè) observable 都曾有送值出來(lái)才會(huì)呼叫我們傳入的 callback抢腐，所以這段程式是這樣運(yùn)行的
- newest 送出了
0姑曙，但此時(shí) source 并沒(méi)有送出過(guò)任何值，所以不會(huì)執(zhí)行 callback - source 送出了
0迈倍，此時(shí) newest 最后一次送出的值為0渣磷，把這兩個(gè)數(shù)傳入 callback 得到0。 - newest 送出了
1授瘦，此時(shí) source 最后一次送出的值為0醋界，把這兩個(gè)數(shù)傳入 callback 得到1竟宋。 - newest 送出了
2，此時(shí) source 最后一次送出的值為0形纺，把這兩個(gè)數(shù)傳入 callback 得到2丘侠。 - source 送出了
1，此時(shí) newest 最后一次送出的值為2逐样，把這兩個(gè)數(shù)傳入 callback 得到3蜗字。 - newest 送出了
3，此時(shí) source 最后一次送出的值為1脂新，把這兩個(gè)數(shù)傳入 callback 得到4挪捕。 - source 送出了
2，此時(shí) newest 最后一次送出的值為3争便，把這兩個(gè)數(shù)傳入 callback 得到5级零。 - source 結(jié)束，但 newest 還沒(méi)結(jié)束滞乙，所以 example 還不會(huì)結(jié)束奏纪。
- newest 送出了
4，此時(shí) source 最后一次送出的值為2斩启，把這兩個(gè)數(shù)傳入 callback 得到6序调。 - newest 送出了
5，此時(shí) source 最后一次送出的值為2兔簇，把這兩個(gè)數(shù)傳入 callback 得到7发绢。 - newest 結(jié)束，因?yàn)?source 也結(jié)束了垄琐，所以 example 結(jié)束边酒。
不管是 source 還是 newest 送出值來(lái)，只要另一方曾有送出過(guò)值(有最后的值)此虑，就會(huì)執(zhí)行 callback 并送出新的值，這就是 combineLatest口锭。
combineLatest 很常用在運(yùn)算多個(gè)因子的結(jié)果朦前，例如最常見的 BMI 計(jì)算，我們身高變動(dòng)時(shí)就拿上一次的體重計(jì)算新的 BMI鹃操，當(dāng)體重變動(dòng)時(shí)則拿上一次的身高計(jì)算 BMI韭寸，這就很適合用 combineLatest 來(lái)處理！
zip
在講 withLatestFrom 之前荆隘，先讓我們先來(lái)看一下 zip 是怎麼運(yùn)作的恩伺，zip 會(huì)取每個(gè) observable 相同順位的元素并傳入 callback，也就是說(shuō)每個(gè) observable 的第 n 個(gè)元素會(huì)一起被傳入 callback椰拒，這裡我們同樣直接用范例講解會(huì)比較清楚
var source = Rx.Observable.interval(500).take(3);
var newest = Rx.Observable.interval(300).take(6);
var example = source.zip(newest, (x, y) => x + y);
example.subscribe({
next: (value) => { console.log(value); },
error: (err) => { console.log('Error: ' + err); },
complete: () => { console.log('complete'); }
});
// 0
// 2
// 4
// complete
Marble Diagram 長(zhǎng)這樣
source : ----0----1----2|
newest : --0--1--2--3--4--5|
zip(newest, (x, y) => x + y)
example: ----0----2----4|
以我們的范例來(lái)說(shuō)晶渠，zip 會(huì)等到 source 跟 newest 都送出了第一個(gè)元素凰荚，再傳入 callback，下次則等到 source 跟 newest 都送出了第二個(gè)元素再一起傳入 callback褒脯，所以運(yùn)行的步驟如下：
- newest 送出了第一個(gè)值
0便瑟，但此時(shí) source 并沒(méi)有送出第一個(gè)值，所以不會(huì)執(zhí)行 callback番川。 - source 送出了第一個(gè)值
0到涂，newest 之前送出的第一個(gè)值為0，把這兩個(gè)數(shù)傳入 callback 得到0颁督。 - newest 送出了第二個(gè)值
1践啄，但此時(shí) source 并沒(méi)有送出第二個(gè)值，所以不會(huì)執(zhí)行 callback沉御。 - newest 送出了第三個(gè)值
2屿讽，但此時(shí) source 并沒(méi)有送出第三個(gè)值，所以不會(huì)執(zhí)行 callback嚷节。 - source 送出了第二個(gè)值
1聂儒，newest 之前送出的第二個(gè)值為1，把這兩個(gè)數(shù)傳入 callback 得到2硫痰。 - newest 送出了第四個(gè)值
3衩婚，但此時(shí) source 并沒(méi)有送出第四個(gè)值，所以不會(huì)執(zhí)行 callback效斑。 - source 送出了第三個(gè)值
2非春，newest 之前送出的第三個(gè)值為2，把這兩個(gè)數(shù)傳入 callback 得到4缓屠。 - source 結(jié)束 example 就直接結(jié)束奇昙，因?yàn)?source 跟 newest 不會(huì)再有對(duì)應(yīng)順位的值
zip 會(huì)把各個(gè) observable 相同順位送出的值傳入 callback，這很常拿來(lái)做 demo 使用敌完，比如我們想要間隔 100ms 送出 'h', 'e', 'l', 'l', 'o'储耐，就可以這麼做
var source = Rx.Observable.from('hello');
var source2 = Rx.Observable.interval(100);
var example = source.zip(source2, (x, y) => x);
這裡的 Marble Diagram 就很簡(jiǎn)單
source : (hello)|
source2: -0-1-2-3-4-...
zip(source2, (x, y) => x)
example: -h-e-l-l-o|
這裡我們利用 zip 來(lái)達(dá)到原本只能同步送出的資料變成了非同步的，很適合用在建立示范用的資料滨溉。
建議大家平常沒(méi)事不要亂用 zip什湘，除非真的需要。因?yàn)?zip 必須 cache 住還沒(méi)處理的元素晦攒，當(dāng)我們兩個(gè) observable 一個(gè)很快一個(gè)很慢時(shí)闽撤，就會(huì) cache 非常多的元素，等待比較慢的那個(gè) observable脯颜。這很有可能造成記憶體相關(guān)的問(wèn)題哟旗！
withLatestFrom
withLatestFrom 運(yùn)作方式跟 combineLatest 有點(diǎn)像，只是他有主從的關(guān)系，只有在主要的 observable 送出新的值時(shí)闸餐，才會(huì)執(zhí)行 callback饱亮，附隨的 observable 只是在背景下運(yùn)作。讓我們看一個(gè)例子
var main = Rx.Observable.from('hello').zip(Rx.Observable.interval(500), (x, y) => x);
var some = Rx.Observable.from([0,1,0,0,0,1]).zip(Rx.Observable.interval(300), (x, y) => x);
var example = main.withLatestFrom(some, (x, y) => {
return y === 1 ? x.toUpperCase() : x;
});
example.subscribe({
next: (value) => { console.log(value); },
error: (err) => { console.log('Error: ' + err); },
complete: () => { console.log('complete'); }
});
先看一下 Marble Diagram
main : ----h----e----l----l----o|
some : --0--1--0--0--0--1|
withLatestFrom(some, (x, y) => y === 1 ? x.toUpperCase() : x);
example: ----h----e----l----L----O|
withLatestFrom 會(huì)在 main 送出值的時(shí)候執(zhí)行 callback绎巨，但請(qǐng)注意如果 main 送出值時(shí) some 之前沒(méi)有送出過(guò)任何值 callback 仍然不會(huì)執(zhí)行近尚！
這裡我們?cè)?main 送出值時(shí)，去判斷 some 最后一次送的值是不是 1 來(lái)決定是否要切換大小寫场勤，執(zhí)行步驟如下
- main 送出了
h戈锻，此時(shí) some 上一次送出的值為0，把這兩個(gè)參數(shù)傳入 callback 得到h和媳。 - main 送出了
e格遭，此時(shí) some 上一次送出的值為0，把這兩個(gè)參數(shù)傳入 callback 得到e留瞳。 - main 送出了
l拒迅，此時(shí) some 上一次送出的值為0，把這兩個(gè)參數(shù)傳入 callback 得到l她倘。 - main 送出了
l璧微，此時(shí) some 上一次送出的值為1，把這兩個(gè)參數(shù)傳入 callback 得到L硬梁。 - main 送出了
o前硫，此時(shí) some 上一次送出的值為1，把這兩個(gè)參數(shù)傳入 callback 得到O荧止。
withLatestFrom 很常用在一些 checkbox 型的功能屹电，例如說(shuō)一個(gè)編輯器，我們開啟粗體后跃巡，打出來(lái)的字就都要變粗體危号，粗體就像是 some observable，而我們打字就是 main observable素邪。
今日小結(jié)
今天介紹了三個(gè)合併用的 operators外莲，這三個(gè) operators 的 callback 都會(huì)依照合併的 observable 數(shù)量來(lái)傳入?yún)?shù)，如果我們合併了三個(gè) observable兔朦，callback 就會(huì)有三個(gè)參數(shù)偷线，而不管合併幾個(gè) observable 都會(huì)只會(huì)回傳一個(gè)值。
這幾個(gè) operators 需要花比較多的時(shí)間思考烘绽，讀者們不用硬記他的運(yùn)作行為淋昭，只要稍微記得有這些 operators 可以用就可以了俐填。等到真的要用時(shí)安接，再重新回來(lái)看他們的運(yùn)作方式做選擇。
不知道讀者們今天有沒(méi)有收穫呢？ 如果有任何問(wèn)題盏檐，歡迎在下方留言給我歇式，謝謝！
