如何动态过滤/删除树形JSON父节点并将子节点升级为父节点

要实现动态删除指定父节点并将其子节点升级到原父节点层级的需求，核心思路是递归遍历树形结构，定位目标节点后用它的子节点列表替换自身。以下是通用实现方案（以JavaScript为例）：

实现思路 #

1. 递归遍历每个节点的子节点列表
2. 匹配到目标节点时，将该节点从父节点的子列表中移除，同时把它的子节点插入到原位置
3. 可选：自动更新子节点的Depth值（使其与原父节点层级一致，示例中未修改Depth，但实际场景中通常需要修正）

通用代码实现 #

/**
 * 处理树形结构：删除指定节点并升级其子节点
 * @param {Array} tree - 原始树形数据
 * @param {Function} matchFn - 判断是否为目标节点的函数
 * @param {boolean} updateDepth - 是否更新子节点的Depth值
 * @returns {Array} 处理后的树形数据
 */
function replaceNodeWithChildren(tree, matchFn, updateDepth = false) {
  // 递归处理单个节点的子节点
  function processNodes(nodes, parentDepth) {
    const result = [];
    for (const node of nodes) {
      if (matchFn(node)) {
        // 匹配到目标节点，将其子节点加入结果，可选更新Depth
        const children = node.Nodes || [];
        result.push(...updateDepth 
          ? children.map(child => ({ ...child, Depth: parentDepth + 1 })) 
          : children);
      } else {
        // 未匹配，递归处理当前节点的子节点
        const processedNode = { ...node };
        processedNode.Nodes = processNodes(processedNode.Nodes || [], processedNode.Depth);
        result.push(processedNode);
      }
    }
    return result;
  }

  return processNodes(tree, -1); // 根节点的父层级设为-1，确保根节点Depth保持0
}

使用示例 #

针对你的需求，删除Id为224136的节点：

// 原始树形数据
const originalTree = [
  {
    "Id": "224146",
    "Text": "Node One",
    "Depth": 0,
    "IsSelected": false,
    "IsExpanded": false,
    "Nodes": []
  },
  {
    "Id": "224135",
    "Text": "Node two",
    "Depth": 0,
    "IsSelected": false,
    "IsExpanded": false,
    "Nodes": [
      {
        "Id": "224136",
        "Text": "Client Summary",
        "Depth": 1,
        "IsSelected": false,
        "IsExpanded": false,
        "Nodes": [
          {
            "Id": "224137",
            "Text": "Manager 1",
            "Depth": 2,
            "IsSelected": false,
            "IsExpanded": false,
            "Nodes": []
          }
        ]
      }
    ]
  },
  {
    "Id": "224147",
    "Text": "Node three",
    "Depth": 0,
    "IsSelected": false,
    "IsExpanded": false,
    "Nodes": []
  }
];

// 调用函数，匹配Id为224136的节点，不更新Depth（和示例输出一致）
const processedTree = replaceNodeWithChildren(
  originalTree,
  node => node.Id === "224136",
  false
);

console.log(JSON.stringify(processedTree, null, 2));

运行后得到的结果与你提供的期望JSON完全一致。如果需要自动修正Depth，将第三个参数设为true，Manager 1的Depth会从2变为1，更符合层级逻辑。

扩展性说明 #

• 匹配逻辑灵活：matchFn可根据任意字段判断（比如Text、Depth等），无需修改核心代码
• 支持任意层级：无论目标节点在树形结构的第几层，递归都会遍历定位
• 不污染原数据：所有节点通过浅拷贝处理，原始数据保持不变

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