[CombineLatest](https://www.learnrxjs.io/learn-rxjs/operators/combination/combinelatest) 的使用場景：

> This operator is best used when you have multiple, long-lived observables that rely on each other for some calculation or determination.

當有多個長時間存活的 Observable，且依賴彼此，共同完成某些計算邏輯時，適合使用 CombineLatest.

> When any observable emits a value, emit the last emitted value from each.

![](https://img-blog.csdnimg.cn/img_convert/7043d09558bfb4213d51b775d318fe5c.png)

為了學習 CombineLatest 的用法，我寫了下面這個小程式：

```typescript
import { Component, OnInit, Inject } from '@angular/core';
import { fromEvent, combineLatest } from 'rxjs';
import { mapTo, startWith, scan, tap, map } from 'rxjs/operators';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-combine-latest',
  templateUrl: './combine-latest.component.html'
})
export class CombineLatestComponent implements OnInit {
  readonly document: Document;

constructor(
    // https://github.com/angular/angular/issues/20351
    @Inject(DOCUMENT) document: any) {
      this.document = document as Document;
    }

redTotal:HTMLElement;
  blackTotal: HTMLElement;
  total:HTMLElement;  
  test:HTMLElement;

ngOnInit(): void {
    this.redTotal = this.document.getElementById('red-total'); 
    this.blackTotal = this.document.getElementById('black-total');
    this.total = this.document.getElementById('total');
    this.test = this.document.getElementById('test');

combineLatest(this.addOneClick$('red'), 
    
    this.addOneClick$('black')).subscribe(([red, black]: any) => {
      this.redTotal.innerHTML = red;
      this.blackTotal.innerHTML = black;
      this.total.innerHTML = red + black;
    });

fromEvent(this.test, 'click').pipe(map( event => event.timeStamp), mapTo(1)).subscribe((event) => console.log(event));
  }

addOneClick$ = id =>
  fromEvent(this.document.getElementById(id), 'click').pipe(
    // map every click to 1
    mapTo(1),
    // keep a running total
    scan((acc, curr) => acc + curr, 0),
    startWith(0)
  );
}

```
效果：

* 點選 Red 按鈕，則 Red 計數器 和 Total 計數器 加 1
* 點選 Black 按鈕，則 Black 計數器 和 Total 計數器 加 1
![](https://img-blog.csdnimg.cn/img_convert/8025709a5d92a9c493a0461bc1b54218.png)

combine 輸入引數：兩個 Observable：
![](https://img-blog.csdnimg.cn/img_convert/e782835920760f928a3ce4b7308c090d.png)

我這個例子裡，只執行下面這行語句，其他 IF 分支都沒有進去：

```typescript
return fromArray(observables, scheduler).lift(new CombineLatestOperator(resultSelector))
```

首先執行 fromArray:輸入是 Array，包含兩個元素：

![](https://img-blog.csdnimg.cn/img_convert/fe31a50879b8ed34c32f579854612a1b.png)

fromArray: 返回一個新的 Observable，輸入是subscribeToArray(input).

關於 subscribeToArray 的邏輯分析，參考我這篇文章：[Rxjs 裡 subscribeToArray 工具函式的詳細分析](https://zhuanlan.zhihu.com/p/378402565).

下一步例項化 CombineLatestOperator：
![](https://img-blog.csdnimg.cn/img_convert/aaf987f3b0ac38351be452956467ac9a.png)

執行 lift 操作，建立新的 Observable 物件：
![](https://img-blog.csdnimg.cn/img_convert/8e511f0a0a370e484cd64174a7e5bf8e.png)

應用程式呼叫 Observable 物件的 subscribe 方法：

![](https://img-blog.csdnimg.cn/img_convert/891b11bfc9f8fe5a38d7f087b84a258e.png)

![](https://img-blog.csdnimg.cn/img_convert/97f3bf2e80f66356de288c5f17e6074e.png)

閉包裡包含的兩個 Observable，分別 for red 和 black 按鈕：
![](https://img-blog.csdnimg.cn/img_convert/7b4a9271f45ce22e673cab7b78996f2b.png)

順著 Observable 的 source 屬性和 _subscribe, 能找到 該 Observable pipe 裡傳遞的所有操作：
![](https://img-blog.csdnimg.cn/img_convert/b8de7590e603b2031682492fffc3e007.png)

![](https://img-blog.csdnimg.cn/img_convert/e8599009953eb78f908b66e8430ac369.png)

首先使用 array 的第一個元素作為引數，呼叫 subscriber 函式：
![](https://img-blog.csdnimg.cn/img_convert/3776d91082eb93c473d5fa079bab8822.png)

![](https://img-blog.csdnimg.cn/img_convert/120400ce68ec65908460009739e7e492.png)

先執行 mapTo(1) 邏輯:

![](https://img-blog.csdnimg.cn/img_convert/61a77cc3255142ab5e348d271a2bdf6b.png)

Maptosubscriber 的 destination 指向 Scansubscriber：
![](https://img-blog.csdnimg.cn/img_convert/16c230f719588e10cc2f0c35c040c9d4.png)

![](https://img-blog.csdnimg.cn/img_convert/aaa6655fe06a4b0766fb5ba0b9f1672e.png)

scan.js 的內部實現：
![](https://img-blog.csdnimg.cn/img_convert/08cb77eb67f534eac01bb51c6f515a06.png)

![](https://img-blog.csdnimg.cn/img_convert/ed0c3e92f2ddff2def94f8a48034161b.png)

accumulator 就是應用程式自定義的函式：
![](https://img-blog.csdnimg.cn/img_convert/17446dfc7d57415ce8615706050da35f.png)

其中 acc 就是 scan.js 裡的 seed，而 curr 即是當前值。

當前這輪迭代的結果存入 Scan Operator 的 seed 欄位裡，作為下一次迭代的輸入：

![](https://img-blog.csdnimg.cn/img_convert/eb16d28a0c007abdf994a7bbcdfc22b1.png)

這種 Operator 的實現都有套路：

1. export 的 function，就是傳入 Observable.pipe 裡的程式碼： 
![](https://img-blog.csdnimg.cn/img_convert/6cd5b3acbd70e4eca67e520c6e8853bf.png)

![](https://img-blog.csdnimg.cn/img_convert/cfb6b54e27200e85530d23a5c0f015fc.png)

2. operator 實現的 call 函式
3. ScanSubscriber 繼承了 Subscriber，重新實現了 _next 方法。不同的 subscriber，差異就體現在這些 _next 方法上。

點選 red 或者 black 按鈕後，兩個 Observable 的初始值：0，0：
![](https://img-blog.csdnimg.cn/img_convert/ee0179c063b4af52ac4c28f479e173f7.png)

這個0，0 是怎麼生成的？
兩個空的物件：NONE
![](https://img-blog.csdnimg.cn/img_convert/2a5abc22d8141c1ab12b3ad3bc0b668e.png)

是在這裡插入的：
![](https://img-blog.csdnimg.cn/img_convert/b4f38cd7416802e169c32d4b72f6dfde.png)

這個 merge map 應該是框架自動生成的：
![](https://img-blog.csdnimg.cn/img_convert/28ace9c73c94696f0a5ac7cf9d023b7c.png)

第一個元素已經從空物件轉換成了0：
![](https://img-blog.csdnimg.cn/img_convert/22f17d77d18cbe296bd8fd3f908f139d.png)

這行語句執行完之後，就變成兩個 0 了：
![](https://img-blog.csdnimg.cn/img_convert/ea7b1d861d309e63e2790151c29c27ba.png)

使用 slice API 將陣列複製一份：
![](https://img-blog.csdnimg.cn/img_convert/d36293be315d2c7b070c9dd3f2ad530b.png)

由此可見，combineLatest Operator 本身不維護狀態，而是等待維護狀態的 scan 的輸入：
![](https://img-blog.csdnimg.cn/img_convert/8a1bd431693f54bd5e24dbe4f72328cd.png)

![](https://img-blog.csdnimg.cn/img_convert/4f9ef5a5609000473d4195d7996c2bac.png)

RxJS CombineLatest operator 的一個具體使用例子

相關文章