随着前端开发的发展，越来越多的应用程序需要实现异步数据流的操作，而 RxJS 正是这个时候应运而生。它是一款强大的 JavaScript 库，采用了一种响应式编程的思想，可以帮助开发者更加便捷和高效地管理异步数据流，处理数据的转换和过滤，实现复杂的逻辑控制等。Observable 是 RxJS 中最基础的概念，它代表了一个会随着时间变化的数据流，而 RxJS 针对这些数据流提供了丰富的操作符用来操作 Observable，本文将介绍 RxJS 中使用 Observable 的一些雷区。
一、 发布与订阅
在讲解操作符之前，我们先来看看 RxJS 中最基本的概念──发布与订阅。一个 Observable 可以被订阅，每当有数据发送时，订阅者会立即接收到相应的数据。订阅者可以通过 subscribe 方法来订阅 Observable，而 Observable 可以通过 next 方法来发送数据。例如：
-- -------------------- ---- ------- ----- ---------- - --------------------------------------- - ----------------------- ----------------------- -------------------- --- ---------------------- ----- ---- -- ------------------ --------- -- -- ------------------------ ---
以上代码中，我们首先创建了一个 observable，它会发送两个数据：'hello' 和 'world'，最后会调用 observer 的 complete 方法来表示数据流已经结束。然后我们使用 subscribe 方法来订阅该 observable，订阅者接收到两个数据后输出，最后结束。
二、操作符
1. map 操作符
map 操作符可以将 Observable 发出的数据进行转换，使得订阅者能够接收到经过转换后的数据。下面是一个例子：
-- -------------------- ---- -------
----- ---------- - --------------------------------------- -
-----------------
-----------------
-----------------
---
----------
------ -- - - --
------------
----- ---- -- ------------------
--------- -- -- ------------------------
---以上代码中，我们创建了一个 observable，然后我们使用 map 操作符将该 Observable 发出的每个数据乘以2，最后订阅该 observable，接收到的数据为 2、4、6。
注意：使用 map 操作符时，必须要确保转换后的数据类型与原数据类型是一致的，否则会抛出类型错误。
2. filter 操作符
filter 操作符可以对 Observable 发出的每个数据进行过滤，只有满足条件的数据才会被订阅者接收到。下面是一个例子：
-- -------------------- ---- -------
----- ---------- - --------------------------------------- -
-----------------
-----------------
-----------------
---
----------
--------- -- - - - --- --
------------
----- ---- -- ------------------
--------- -- -- ------------------------
---以上代码中，我们创建了一个 observable，然后使用 filter 操作符将该 Observable 发出的每个数据过滤掉不是偶数的数据，最后订阅 observable，接收到的数据为 2。
3. scan 操作符
scan 操作符可以对 Observable 发出的数据进行累积，也就是会输出累计值，而不是单独的数据项。下面是一个例子：
-- -------------------- ---- -------
----- ---------- - --------------------------------------- -
-----------------
-----------------
-----------------
---
----------
----------- ---- -- --- - ---- --
------------
----- ---- -- ------------------
--------- -- -- ------------------------
---以上代码中，我们创建了一个 observable，然后使用 scan 操作符将该 Observable 发出的每个数据进行累加，最后订阅 Observable，接收到的数据为 1、3、6。
4. switchMap 操作符
switchMap 操作符可以将 Observable 发出的每个数据映射为一个新的 Observable，然后将这个新 Observable 订阅到，然后接收这个新 Observable 发出的数据，同时，如果原来还有未完成的操作，会取消它，这样可以避免出现多余的东西并且始终保持最新的数据。下面是一个例子：
-- -------------------- ---- -------
----- ---------- - --------------------------------------- -
-----------------
-----------------
-----------------
---
----------
--------------- -- --------------------- - ---
------------
----- ---- -- ------------------
--------- -- -- ------------------------
---以上代码中，我们创建了一个 observable，然后使用 switchMap 操作符将该 Observable 发出的每个数据乘以2并返回一个新的 Observable，最后订阅该 Observable，接收到的数据为 2、4、6。
三、总结
RxJS 的 Observable 和操作符是一个非常强大的工具，可以让开发者更加便捷和高效地管理异步数据流，并能够实现复杂的逻辑控制等。但是，在使用 RxJS 时，需要特别注意一些操作符的特点及其使用方法，避免出现不必要的错误。在使用操作符时，需要确保转换后的数据类型与原数据类型是一致的，同时一些操作符例如 switchMap 等如果不理解清楚，也会导致一些隐藏的问题，需要特别小心。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649d5ed248841e9894a22749