RXJS 的 operator

Scroll Down

zip

zip 的直译就是拉链,事实上,有些压缩软件的图标就是一个带拉链的钥匙包。拉链的特点是两边各有一个“齿”,两者会啮合在一起。这里的 zip 操作也是如此。

从图上我们可以看到,两个输入流中分别出现了一些数据,当仅仅输入流 A 中出现了数据时,输出流中什么都没有,因为它还在等另一个“齿”。当输出流 B 中出现了数据时,两个“齿”都凑齐了,于是对这两个齿执行中间定义的运算(取 A 的形状,B 的颜色,并合成为输出数据)。

可以看到,当任何一个流先行结束之后,整个输出流也就结束了。

拉链创建器适用的场景要少一些,通常用于合并两个数据有对应关系的数据源。比如一个流中是姓名,另一个流中是成绩,还有一个流中是年龄,如果这三个流中的每个条目都有精确的对应关系,那么就可以通过 zip 把它们合并成一个由表示学生成绩的对象组成的流。

2267652-c3dec6ee6372b346

zip工作原理如下,当每个传入zip的流都发射完毕第一次数据时,zip将这些数据合并为数组并发射出去;当这些流都发射完第二次数据时,zip再次将它们合并为数组并发射。以此类推直到其中某个流发出结束信号,整个被合并后的流结束,不再发射数据。(zip会等待每个子流都发射完一次数据然后合并发射,之后继续等待,直到其中某个流结束)

function f11() {
    const ob1 = interval(1000).pipe(
        tap(num => console.log('Ob1  ' + num)), map(num => `ob1:${num}`), take(4)
    );

    const ob2 = interval(5000).pipe(
        tap(num => console.log('Ob2  ' + num)), map(num => `ob2:${num}`), take(6)
    );

    zip(ob1, ob2).subscribe(
        {
            next: (data) => console.log(data),
            complete: () => console.log("complete")
        }
    );
}
f11();

输出:
Ob1 0
Ob1 1
Ob1 2
Ob1 3
Ob2 0
[ 'ob1:0', 'ob2:0' ]
Ob2 1
[ 'ob1:1', 'ob2:1' ]
Ob2 2
[ 'ob1:2', 'ob2:2' ]
Ob2 3
[ 'ob1:3', 'ob2:3' ]
complete