RxJS 是一个非常流行的响应式编程库，在前端开发中被广泛使用。本文将会介绍 RxJS 中常见操作符的 marble diagram，这对于理解 RxJS 的操作符非常有帮助。
什么是 marble diagram
Marble diagram 是一种用来描述流（observable）操作的图示方法。它使用一系列有颜色的小球（marble）来代表不同的值，使用水平线来代表时间轴，以展示每个操作的输入和输出。
RxJS 中常见的操作符的 marble diagram 可以帮助我们更好地理解它们的作用和用法，这对于快速掌握 RxJS 编程非常有帮助。
常见操作符的 marble diagram
下面我们将介绍 RxJS 中常见的一些操作符的 marble diagram。
map
map 操作符可以将 observable 中的每个值通过映射转化成另一个值。它的 marble diagram 如下：
--1--2--3--4--5--| map(x => x * 2) --2--4--6--8--10--|
这个 marble diagram 中，原始的 observable 中包含了数字 1 到 5 的值，我们使用 map 操作符将这些值乘以 2 转化成新的值，最后得到的 observable 中包含了数字 2 到 10 的值。
filter
filter 操作符可以过滤掉不满足条件的值，只将满足条件的值通过。它的 marble diagram 如下：
--1--2--3--4--5--| filter(x => x % 2 === 0) ------2-----4----|
这个 marble diagram 中，原始的 observable 中包含了数字 1 到 5 的值，我们使用 filter 操作符将不是偶数的值过滤掉，只保留偶数的值，得到的新的 observable 中只包含数字 2 和 4 的值。
merge
merge 操作符可以将多个 observable 合并成一个 observable。它的 marble diagram 如下：
--1----2--3-----|
-----4----5--6--|
merge()
--1-4--2--5--3-6|这个 marble diagram 中，有两个原始的 observable，第一个 observable 中包含数字 1、2 和 3，第二个 observable 中包含数字 4、5 和 6。使用 merge 操作符将这两个 observable 合并成一个新的 observable，新的 observable 会按照时间顺序发出两个 observable 中的值，得到的新的 observable 中包含了数字 1、4、2、5、3 和 6 的值。
concat
concat 操作符可以将多个 observable 连接起来组成一个新的 observable。它的 marble diagram 如下：
--1---2-----|
--------3---4--|
concat()
--1---2-----3---4--|这个 marble diagram 中，有两个原始的 observable，第一个 observable 中包含数字 1 和 2，第二个 observable 中包含数字 3 和 4。使用 concat 操作符将这两个 observable 连接起来组成一个新的 observable，新的 observable 会在第一个 observable 完成后才会发出第二个 observable 中的值，得到的新的 observable 中包含了数字 1、2、3 和 4 的值。
scan
scan 操作符可以将 observable 中的值通过累加器进行累加，得到一个累加后的结果。它的 marble diagram 如下：
--1--2--3--4--5--| scan((acc, x) => acc + x, 0) --1--3--6--10-15-|
这个 marble diagram 中，原始的 observable 中包含了数字 1 到 5 的值，使用 scan 操作符将这些值进行累加，得到新的 observable 中包含了数字 1、3、6、10 和 15 的值。
总结
本文介绍了 RxJS 中常见的一些操作符的 marble diagram。使用 marble diagram 可以更好地理解操作符的作用和用法，掌握这些操作符对于快速掌握 RxJS 编程非常有帮助。希望本文对大家在学习 RxJS 中有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66485ab0d3423812e46f4b5f