如何根据ID递归删除嵌套JSON数组中的文件节点？

先明确典型的文件夹JSON结构示例 #

假设你的数据结构是这样的（每个节点包含boxId、类型标识、子节点数组）：

{
  "boxId": "root-1",
  "name": "根文件夹",
  "type": "folder",
  "children": [
    {
      "boxId": "file-1",
      "name": "文档1.pdf",
      "type": "file"
    },
    {
      "boxId": "folder-2",
      "name": "子文件夹",
      "type": "folder",
      "children": [
        {
          "boxId": "file-2",
          "name": "图片.png",
          "type": "file"
        }
      ]
    }
  ]
}

递归删除函数实现（JavaScript） #

function deleteNodeByBoxId(targetBoxId, node) {
  // 先处理当前节点的子节点数组
  if (node.children && Array.isArray(node.children)) {
    // 找到要删除的节点索引
    const targetIndex = node.children.findIndex(child => child.boxId === targetBoxId);
    if (targetIndex !== -1) {
      // 从父节点的children中移除目标节点
      node.children.splice(targetIndex, 1);
      return true; // 找到并删除，返回true终止递归
    }
    // 遍历所有子节点，递归查找
    for (const child of node.children) {
      const deleted = deleteNodeByBoxId(targetBoxId, child);
      if (deleted) return true; // 找到就提前返回
    }
  }
  return false; // 未找到目标节点
}

// 调用示例：
// const updatedTree = JSON.parse(JSON.stringify(originalTree)); // 深拷贝避免修改原数据
// deleteNodeByBoxId("file-2", updatedTree);

关键逻辑说明 #

• 深拷贝原数据：调用前建议先深拷贝原始JSON，避免直接修改源数据（比如用JSON.parse(JSON.stringify())，复杂结构可以用lodash的cloneDeep）。
• 递归终止条件：找到匹配boxId的节点时，立即从父节点的children数组中移除，返回true终止后续递归。
• 遍历子节点：如果当前节点的子节点里没有目标，就逐个递归遍历子节点的子树，直到找到或遍历完所有节点。
• 根节点处理：如果要删除的是根节点，需要单独判断（比如直接返回null或者空对象，根据业务需求调整）：

  function deleteRootOrChild(targetBoxId, rootNode) {
    if (rootNode.boxId === targetBoxId) {
      return null; // 根节点匹配，返回null表示删除根
    }
    deleteNodeByBoxId(targetBoxId, rootNode);
    return rootNode;
  }
  

适配不同结构的注意点 #

如果你的JSON结构和示例不同（比如子节点数组不叫children，或者节点属性名有差异），只需要修改这两处：

1. 替换node.children为你的子节点数组字段名（比如node.subNodes）。
2. 确保child.boxId是你实际的ID字段名（比如child.id）。

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