RxJS 是前端开发中使用最广泛的响应式编程库之一，它为开发者提供了许多丰富的运算符来处理数据流。这些运算符有助于简化代码、提高代码的可读性以及更好地控制数据流。本篇文章将会深入浅出地介绍一些常用的 RxJS 运算符，让读者可以轻松吞噬 RxJS 运算符的知识，从而在实践中更好地应用。
操作符简介
RxJS 中有两类运算符，分别是实例运算符和静态运算符。
实例运算符是在 Observable 实例对象上调用的方法，它们用于改变数据流的行为且它们总是会返回一个新的 Observable 实例对象。
静态运算符是在 RxJS 对象上定义的一个方法，它们使用普通的函数调用方式，用于操作 Observable 对象并返回一个新的 Observable 实例对象。
本文将会对一些常用的 RxJS 运算符进行详细介绍。
常用运算符
map
map 运算符用于对 Observable 实例流中的每一项数据进行转换并返回一个新的 Observable 实例。它的使用方法如下：
import { of } from 'rxjs'; import { map } from 'rxjs/operators'; const source = of(1, 2, 3, 4, 5); const mapped = source.pipe(map(x => x * x)); mapped.subscribe(x => console.log(x)); // 1, 4, 9, 16, 25
上述代码中，我们依次导入了 Observable 的 of 方法和 map 运算符。通过 of 方法生成一个带有 1、2、3、4、5 五个值的 Observable 实例，然后用 map 运算符生成另一个流实例，将原来数据流中的每个值都平方并输出结果。
上述的代码中用到了 pipe 运算符，pipe 运算符用于组合运算符。对一个 Observable 实例对象调用多个实例运算符，使用 pipe 运算符将这些运算符作为参数传递进去，返回一个新的 Observable 对象。pipe 运算符可以将一个操作符的输出作为另一操作符的输入，通过无限级连的方式链接多个操作符。
filter
filter 运算符用于过滤掉 Observable 实例中不符合某些条件的项，返回一个新的 Observable 实例。它的使用方法如下：
import { from } from 'rxjs'; import { filter } from 'rxjs/operators'; const source = from([1, 2, 3, 4, 5]); const filtered = source.pipe(filter(x => x % 2 === 0)); filtered.subscribe(x => console.log(x)); // 2, 4
上述代码中，我们依次导入了 Observable 的 from 方法和 filter 运算符。通过 from 方法生成一个带有 1、2、3、4、5 五个值的 Observable 实例，然后用 filter 运算符生成另一个流实例，将原来数据流中的每个值进行判断是否为偶数，是则输出结果。
tap
tap 运算符用于在数据流中的每一个值上应用一个函数，然后继续发射该值。tap 运算符是一个不会修改发出的值的副作用的运算符，它通常被用来调试和日志记录等目的。它的使用方法如下：
-- -------------------- ---- ------- ------ - ---- - ---- ------- ------ - ---- ---- ------ - ---- ----------------- ----- ------ - -------- -- -- -- ---- ----- ------ - ------------ ----- -- ------------------- ---- -------- ----- -- - - --- ----- -- ------------------- ------- -------- -------- -- - - - --- --- ----- -- ------------------ ------- ------- -- ------------------ -- ----------------展开代码
上述代码中，我们依次导入了 Observable 的 from、tap、map 和 filter 方法。通过 from 方法生成一个带有 1、2、3、4、5 五个值的 Observable 实例，然后用 tap 运算符在值流中添加三个日志输出点。之后，将 map 运算符添加进流中，用于将权值平方，然后使用 filter 运算符过滤掉不是偶数的数据值。最终运用 tap 运算符输出每个值，并且，该值是被 filter 运算符过滤后的值。
reduce
reduce 运算符用于将 Observable 实例流中的所有值折叠为一个单一的值。它的使用方法如下：
import { from } from 'rxjs'; import { reduce } from 'rxjs/operators'; const source = from([1, 2, 3, 4, 5]); const reduced = source.pipe(reduce((acc, curr) => acc + curr, 0)); reduced.subscribe(x => console.log(x)); // 15
上述代码中，我们依次导入了 Observable 的 from 方法和 reduce 运算符。通过 from 方法生成一个带有 1、2、3、4、5 五个值的 Observable 实例，然后用 reduce 运算符生成另一个流实例，将原来数据流中所有数据的和输出。
结语
本文介绍了一些常用的 RxJS 运算符，只是其中的一部分，RxJS 还有许多其他的运算符可以使用。希望通过该文的介绍，读者可以更好地学习和应用 RxJS。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ca8072e46428fe9e2bbb90
