随着前端技术的不断更新迭代，ES8 带来的 Observable 已成为一项重要的技术。Observable 为响应式编程提供了全新的思路，它可以让我们轻松地处理异步事件流。
在 Observable 的实现中，递归是一个常见的需求，特别是在多层嵌套的情况下。本文将深入探讨 Observable 的递归适应方法，并提供示例代码和指导意义。
Observable 简介
Observable 是一种数据流，它可以实现“观察者模式”。在 Observable 中，一旦数据源有数据更新，它就会自动通知订阅者进行相应的操作。
Observable 的特点：
- 可以“推”数据，也可以“拉”数据
- 可以适应异步操作
- 可以取消订阅
- 可以与其他 Observable 进行组合
递归的应用场景
递归在前端开发中是非常常见的需求，例如在树形结构中进行操作、在多层嵌套的 JSON 数据中获取某个值等。
Observable 的递归主要应用于以下场景：
- 在 Observable 中处理多个数据源
- 在 Observable 中进行数据的处理和转化
Observable 的递归适应
在处理递归场景时，我们需要使用 Observable 的 operators 中提供的方法来进行适应。下面分别介绍两个常用的方法。
expand 方法
expand 方法可以将一个 Observable 中的每个数据项进行递归展开，直到满足一定的条件，例如：
-- -------------------- ---- ------- ----- - ---------- - - ---------------- ----- ------ - ------------------- ----- ------- - ----------------- -- - --------------------------- -- ---- --- ---- - ------ ------------------- - ------ --------------------------------------------------- - ---- --- ----- ------------ - -------------------------------展开代码
上面的代码中，source 可以看做是第一个数据源，expand 方法中的参数 val 就是当前要处理的数据项。当 val 不等于 'G' 时，expand 方法会将 val 递归展开，直到 val 等于 'G'。此时 expand 方法会返回一个空的 Observable，从而停止递归。
输出：
-- -------------------- ---- ------- - ------ - ------ - ------ - ------ - ------ - ------展开代码
concatMap 方法
concatMap 方法可以将一个 Observable 中的每个数据项映射为另一个 Observable，并将它们按照顺序进行连接，例如：
const { Observable } = require('rxjs'); const source = Observable.of(1, 2, 3, 4); const example = source.concatMap(val => { const result = Observable.interval(1000).take(val); return result; }); const subscription = example.subscribe(console.log);
上面的代码中，source 是一个包含四个数值的 Observable，concatMap 方法返回了一个 Observable 数组，其中每个 Observable 都是通过 val 进行转换得到的。
输出：
-- -------------------- ---- ------- - - - - - - - - - -展开代码
可以看出，concatMap 方法将每个 Observable 串联起来，从而实现了异步的等待和处理。
示例代码
下面我们来看一个比较复杂的示例代码，展示 Observable 在递归场景中的应用。
假设我们有一个 JSON 数据如下：
-- -------------------- ---- ------- ----- ---- - - --- -- ----- ------- --------- - - --- -- ----- ------ ----- --------- - - --- -- ----- ------ ----- --------- - - --- -- ----- ------ ----- --------- -- -- - --- -- ----- ------ ----- --------- -- -- -- -- - --- -- ----- ------ ----- --------- -- -- -- -- - --- -- ----- ------ ----- --------- -- --- -- ----- ------ ----- --------- -- --- -- -- --展开代码
现在我们需要做的是找到所有 id 属性为 1 的节点和它的子孙节点的 name 属性，以数组的形式返回。
-- -------------------- ---- ------- ----- - ---------- - - ---------------- ----- ---- - - --- -- ----- ------- --------- - - --- -- ----- ------ ----- --------- - - --- -- ----- ------ ----- --------- - - --- -- ----- ------ ----- --------- -- -- - --- -- ----- ------ ----- --------- -- -- -- -- - --- -- ----- ------ ----- --------- -- -- -- -- - --- -- ----- ------ ----- --------- -- --- -- ----- ------ ----- --------- -- --- -- -- -- -------- ------------ --- - ------ ------------------- ----------- -- - -- ------- --- --- - ------ --------------------------------------------------------- - -- ------------- -- ------------------- - -- - ------ ------------------------------ - ------ ------------------- -- ------------- ----- -- - -- -------- --- -- - --------------- - -- -------------- -- -------------------- - -- - ---------------------------------- -- ---- - ---- - ------ ---- -- --- -------- -- ------------ -- ------------ - ----- ------------ - ------------ --------------------------展开代码
上面的代码中，我们定义了一个名为 search 的函数，接受两个参数，分别是 JSON 数据 data 和要查找的节点的 id。
在函数内部，我们使用 expand 方法进行递归展开操作，如果当前项的 id 与传入的 id 相等，就将当前项和它的子项通过 concat 方法连接起来。这里注意使用 Observable.of 将当前项转为 Observable，而不是使用 Observable.from。这是由于 concat 方法只能使用 Observable 对象进行连接。如果当前项的 children 存在，就将它们通过 from 方法转为 Observable 对象，从而继续递归展开。
在展开结束后，我们使用 reduce 方法进行结果的处理。这里使用 arr.push 将需要找到的节点和它的子孙节点都存入一个数组中，其中过滤了子孙节点中的根节点。最后使用 map 方法将结果转为了 name 数组输出。
输出：
-- -------------------- ---- ------- - ------- ------ ----- ------ ----- ------ ----- ------ ----- ------ ----- ------ ----- ------ ---- -展开代码
结语
本文介绍了 Observable 在递归场景中的应用，重点介绍了 expand 方法和 concatMap 方法的使用。对于使用 Observable 进行异步编程的开发者来说，适应递归场景是非常必要的。通过本文的学习，希望大家可以在实际开发中更加熟练地运用 Observable。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6791d868504e4ea9bd5a81c7
