【Rxjs】实例讲解zip和combineLatest操作符的区别

最近因为要改一个bug, 开始死磕RxJS, 这个东西理解起来是真复杂啊，不过经过四天的战斗，终于搞好了bug。

有个想法是接下来写一写RxJS的系列知识。这篇算是一个开头吧。如果出了系列文章，会按照顺序再排版的，在之前添加上一些概念的通俗解释。如果你们已经对RxJS有了认知，就想知道zip和combineLatest的区别，那么直接往下看吧。

一 应用场景

假设我们有两个input输入框，一个是输入矩形的宽度，一个是输入高度，计算矩形的面积。

来看代码：

上面的代码中，我们先使用了combineLatest运算符。

假设我们输入width = 5, height = 4，来看结果：

然后，我们修改width = 6, height不变：

再修改height = 3 , width不变:

继续修改height = 4, width不变：

通过以上的步骤我们可以看出，当使用了combineLatest时，每个流只要发生了变化，就会拿这个流的最新值和另一个流的最新值进行运算。

我们画出上面整个过程中combineLatest的弹珠图如下：

接下来，我们把combineLatest改成 zip，输入同样的数据流，观察结果：

输入 width = 5, height = 4, 观察结果：

修改width = 6，height不变:

注意这里，output的值没有发生变化，依旧是前一次的20。

继续....修改height = 3，width不变：

我们发现output的值发生变化了，为18.

再继续...修改height = 4，width不变：

output的值不发生变化。

观察上面的结果，我们可以总结出zip操作符是要等每个流都发射完第一次数据后，才进行组合，当这些流都发射完第二次数据时，再进行组合，以此类推。弹珠图如下所示：

以上就是zip 操作符和combineLatest的区别，没看明白的....再多看几遍吧。