RxJS 中非常实用的操作符之操作符合并
在使用 RxJS 进行数据流处理时，我们经常需要使用一些操作符进行条件过滤、数据转换等操作，但是有些情况下，我们需要多种操作符一起使用，这时就需要用到操作符合并。
操作符合并指的是将多个操作符组合在一起使用，以达到特定的数据流处理目的。在 RxJS 中，我们可以使用一些操作符来实现操作符的合并，本文就对这些操作符进行详细介绍。
- mergeMap
mergeMap 用于将源 Observable 中的每个值映射为一个新的 Observable，并将多个 Observable 合并为一个 Observable。这个合并的过程可以是序列的，也可以是并行的。
举个例子，我们有一个源 Observable 数组，每个值都是一个数字，我们想要将每个值都提取出来后乘以 2 并输出。
-- -------------------- ---- ------- ------ ------ ---- ------- ------ ---------- ---- ----------------- ----- ---- - --- -- -- -- --- ----- ------ - ----------- ------------ ------------ -- --------- - ---- - -------------- -- ------------------ -- -- -- -- -- --展开代码
- concatMap
concatMap 用于将源 Observable 中的每个值映射为一个新的 Observable，并将多个 Observable 按照顺序进行连接，前一个 Observable 结束后才会订阅下一个 Observable。
同样是上面数字数组的例子，我们想要将每个值都提取出来后乘以 2 并输出，但是需要保证顺序。
-- -------------------- ---- ------- ------ ------ ---- ------- ------ ----------- ---- ----------------- ----- ---- - --- -- -- -- --- ----- ------ - ----------- ------------ ------------- -- --------- - ---- - -------------- -- ------------------ -- -- -- -- -- --展开代码
- switchMap
switchMap 用于将源 Observable 中的每个值映射为一个新的 Observable，并且只会订阅最后映射出的 Observable，之前映射出的 Observable 会被取消订阅。
在使用 switchMap 时需要注意，如果前面的 Observable 没有结束，就会被强制取消订阅，这可能会造成一些问题，所以在使用时需要进行合理的处理。
下面的例子中，通过点击 button 发起请求，每次发起请求时都会取消之前未完成的请求并重新发起新的请求。
-- -------------------- ---- ------- ------ - ---------- -- - ---- ------- ------ - --------- - ---- ----------------- ----- ------ - --------------------------------- ----------------- -------- ------ ------------ -- ------------------------------- -- ----------------- - --------------- -- -------------------展开代码
- exhaustMap
exhaustMap 也用于将源 Observable 中的每个值映射为一个新的 Observable，但是只会订阅第一个映射出的 Observable，之后的映射都会被忽略，直到第一个 Observable 结束后才会订阅下一个 Observable。
下面的例子中，通过点击 button 发起请求，由于每次点击会触发防抖，所以并不会同时出发多次请求。
-- -------------------- ---- ------- ------ ----------- ---- ------- ------ ------------ ------------- ---- ----------------- ----- ------ - --------------------------------- ----------------- -------- ------ ------------------- ------------- -- ------------------------------- -- ----------------- - --------------- -- -------------------展开代码
以上就是我们在 RxJS 中使用的操作符合并，对于数据流处理，合理的使用这些操作符合并会使代码更加简洁和高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c25dcd314edc2684b8c485
