当我们使用 RxJS 处理异步数据流时，Operator 是我们不可或缺的重要工具之一。然而，在过去的版本中，RxJS 中的 Operator 写法并不是完全的 Chainable。我们不得不通过传递函数参数来进行多个 Operator 的组合，这导致了代码不太优雅和可重用性不高的问题。从 RxJS 5.5 版本开始，新的写法解决了这个问题。
Operator 基础
首先，让我们看一下 Operator 的基础知识。RxJS Operator 是一个纯函数，它们能接受 Observable 类型的输入并返回新的 Observable。Operator 用于构建管道，由一系列 Operator 嵌套起来，每一个转换都是一个中间 Observable。用链式地方式连接每一个 Operator，定义了数据流的整个流过程。
例如，我们通过 interval 创建一个数据流，我们可以在这个数据流中使用 Operator 进行转换：
// 可观察的数据流 const source$ = interval(1000); // 转换为新的数据流 const square$ = source$.pipe( map(x => x * x), );
在上述代码中，我们使用 interval 创建了一个每 1 秒生成一个数字的数据流。我们接下来使用 map Operator 对数据进行转换，将当前数字平方，并返回新的 Observable 数据流。最终，square$ 将会输出每个数字的平方。
0, 1, 4, 9, 16, 25, 36, ...
旧的 Operator 写法
在旧的版本中，RxJS 中的 Operator 写法不是很友好，我们不得不通过函数参数进行多个 Operator 的组合：
source$.map(x => x * x).filter(x => x > 25).take(3)
如果有一个很长的管道，我们需要多次进行连续的 .map()、.filter() 和 .take() 调用，都需要在最后返回一个 Observable。由于每个 Operator 都是一个独立的函数，我们不得不进行嵌套回调、括号对齐、分号分割以及匿名函数传参，这不仅让代码难以阅读，而且不太优雅，也容易导致可读性和可维护性的问题。
新的 Operator 写法
从 RxJS 5.5 版本开始，新的 Operator 写法解决了这个问题，可以让我们按照链式的方式优雅地组合多个 Operator：
-- -------------------- ---- ------- ------ - -------- - ---- ------- ------ - ---- ------- ---- - ---- ----------------- ----- ------- - --------------- ----- ------- - ------------- ----- -- - - --- -------- -- - - ---- -------- --
在新的写法中，我们使用了 pipe() 方法，它将每一个 Operator 都都打包成了一个 chainable 的函数，这样就可以链式地让我们构建整个管道，从而使代码变得更加优雅，也更加可读性和可维护性。而且，每个 Operator 都是变量、并用逗号分隔，代码更加简洁清晰。
总结
在 RxJS 中，Operator 是我们用来组合和处理数据流的灵活工具。使用旧的 Operator 写法，让我们的代码变得不优雅，而且可读性和可维护性也受到了很大的影响。但是使用新的写法，我们可以完全地表达出整个管道的构建，从而更加优雅、高效地处理异步数据流。
在日常的实际开发中，我们要尽可能地采用新的 Operator 写法，来构建流畅、可读性、可维护性的代码。
示例代码
-- -------------------- ---- ------- ------ - -------- - ---- ------- ------ - ---- ------- ---- - ---- ----------------- ----- ------- - --------------- ----- ------- - ------------- ----- -- - - --- -------- -- - - ---- -------- -- ------------------------ -- ---------------------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eb3e91f6b2d6eab35df62e