如何使用RxJS操作符递归构建N层级树形视图？

很高兴看到你已经用原生JS实现了递归树形结构的构建！RxJS的响应式风格在处理这种递归/迭代场景时其实非常顺手，尤其是expand操作符简直为这类需求量身定做。下面我来一步步带你用RxJS重写这个功能，同时解释每个部分的作用。

首先先回顾一下原生JS的核心逻辑：找到根节点，然后递归为每个节点挂载子节点，直到没有子节点为止。用RxJS的话，我们可以把这个过程转换成数据流的处理，让逻辑更清晰，还能轻松兼容异步数据源（比如从API拉取数据）。

第一步：定义数据源和辅助函数 #

先把你的数据和一个获取子节点的Observable辅助函数写好：

const departments = [
  {"id":1,"name":"Admin","parentDepartmentId":null},
  {"id":2,"name":"Development","parentDepartmentId":1},
  {"id":3,"name":"Research and Development","parentDepartmentId":1},
  {"id":4,"name":"FE","parentDepartmentId":2},
  {"id":5,"name":"BE","parentDepartmentId":2},
  {"id":6,"name":"Testing","parentDepartmentId":1},
  {"id":7,"name":"Unit Test","parentDepartmentId":6},
  {"id":8,"name":"Integration Test","parentDepartmentId":6},
  {"id":9,"name":"HR","parentDepartmentId":null}
];

// 根据父ID获取子节点的Observable
function getChildren$(parentId) {
  // 这里用of把同步数组转成Observable，如果是异步API，直接替换成fetch/HttpClient即可
  return rxjs.of(departments.filter(dept => dept.parentDepartmentId === parentId));
}

第二步：核心树形构建逻辑 #

用expand操作符处理递归，搭配其他操作符完成节点挂载：

function buildTree$() {
  return getChildren$(null).pipe(
    // 把根节点数组拆分成单个节点的Observable流
    rxjs.concatMap(rootNodes => rxjs.from(rootNodes)),
    // 递归展开每个节点：处理当前节点的子节点，然后继续处理子节点的子节点
    rxjs.expand(node => 
      getChildren$(node.id).pipe(
        // 把子节点挂载到当前节点的items属性上
        rxjs.map(children => {
          node.items = children;
          return children;
        }),
        // 把子节点数组拆分成单个节点，继续递归处理
        rxjs.concatMap(children => rxjs.from(children))
      )
    ),
    // 忽略递归过程中发射的所有子节点，我们只需要最终的根节点树
    rxjs.ignoreElements(),
    // 最后发射完整的根节点数组（也就是最终的树形结构）
    rxjs.endWith(getChildren$(null))
  );
}

第三步：调用并查看结果 #

buildTree$().subscribe(tree => {
  console.log(tree);
  // 输出结果和你原生JS实现的完全一致！
});

关键操作符解释 #

• expand：这是实现递归的核心，它会对每个发射出来的节点，再次执行传入的逻辑（获取子节点、挂载、继续处理子节点），直到返回的Observable完成，完美替代了原生的递归函数调用。
• concatMap：用来把数组转换成单个元素的Observable流，保证处理顺序和原生递归一致。
• ignoreElements + endWith：因为expand会把所有节点（根、子、孙节点）都发射出来，我们只需要最终的根节点树，所以忽略中间值，最后发射完整的根节点数组。

额外优势：轻松兼容异步场景 #

如果你的部门数据是从API异步获取的，只需要修改getChildren$函数即可，核心逻辑完全不用动：

function getChildren$(parentId) {
  // 比如用fetch从API获取子节点
  return fetch(`/api/departments?parentId=${parentId}`)
    .then(res => res.json())
    .then(data => rxjs.of(data));
}

这比原生递归处理异步嵌套要优雅太多了！

内容的提问来源于stack exchange，提问作者nagu gudla