RxJS 如何给嵌套Observable中含subcategories的节点递归添加active:true属性

你之前在pipe链里写的map逻辑，仅遍历处理了API返回结果的最外层一级分类数组，没有对每个节点下的subcategories嵌套结构执行相同的属性添加操作，因此无法覆盖全层级的嵌套数据。

整个逻辑不需要在RxJS的操作符链里写复杂的嵌套处理，核心拆成两部分实现即可：

• 第一步：独立编写一个递归处理分类节点的纯函数，负责单节点的属性添加和子节点遍历
  这个函数的执行逻辑非常明确：
  1. 对传入的单个分类节点做浅拷贝，先给拷贝出的新对象加上active: true属性，避免直接修改API返回的原始对象
  2. 检查处理后的节点是否存在有效的subcategories数组：
     • 存在则对数组内的每一个子分类节点，再次调用同一个递归函数做相同处理，将处理结果回写到当前节点的subcategories字段
     • 不存在则直接返回当前处理完成的节点
       参考实现代码：

  // 分类节点的类型定义
  interface CategoryNode {
    id: number | string;
    name: string;
    subcategories?: CategoryNode[];
    [key: string]: unknown;
  }
  
  // 递归给所有节点加active标识
  function attachActiveFlag(node: CategoryNode): CategoryNode {
    const processedNode = { ...node, active: true };
    if (Array.isArray(processedNode.subcategories)) {
      processedNode.subcategories = processedNode.subcategories.map(child => attachActiveFlag(child));
    }
    return processedNode;
  }
  

• 第二步：将递归函数接入RxJS的处理管道
  替换你之前仅处理一级节点的map逻辑：原来你可能是在map里直接对返回数组做item => ({...item, active: true})的单层映射，现在只需要把单层映射的处理函数替换成上面写的attachActiveFlag即可：

  import { map } from 'rxjs';
  // 假设categoryApi$是接口返回的、承载全量分类数组的Observable
  categoryApi$.pipe(
    map(categoryList => categoryList.map(rootNode => attachActiveFlag(rootNode)))
  ).subscribe(fullProcessedData => {
    // 此处拿到的fullProcessedData，就是所有带subcategories的节点全层级加了active:true的最终结构
  })
  

• 所有处理都基于浅拷贝的新对象完成，不要直接修改原始API返回的数据，避免页面其他复用该数据源的模块出现状态污染
• 绝大多数业务场景的分类嵌套深度都在10层以内，递归写法的可读性远高于手动栈实现的迭代写法，不需要为了极小概率的深度问题提前做过度优化
• 上述逻辑对空数组、无subcategories字段的叶子节点都能正常兼容，不会抛出异常

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