如何在Angular 5（JavaScript）中删除无限嵌套多维数组指定ID元素

完全可以用递归+filter来处理这个需求，这也是应对无限嵌套层级数组的最直接方案。我给你写个具体的实现，顺便拆解下逻辑：

核心实现函数 #

function removeNodeById(arr, targetId) {
  return arr.filter(node => {
    // 匹配到目标ID，直接过滤掉这个节点
    if (node.id === targetId) {
      return false;
    }
    // 存在子节点的话，递归处理子数组
    if (node.children?.length) {
      node.children = removeNodeById(node.children, targetId);
    }
    // 非目标节点，保留下来
    return true;
  });
}

逻辑拆解 #

• 外层用filter遍历数组，决定每个节点是否保留
• 遇到ID匹配的节点，直接返回false过滤掉
• 若当前节点有子节点，递归调用同一个函数处理子数组，把处理后的子数组重新赋值给当前节点的children
• 非目标节点返回true，保留在结果里

测试你的示例数组 #

用你提供的数组来测试，代码如下：

const originalArray = [{ "id": 150, "children": [ { "id": 72, "children": [ { "id": 73, "children": [], }, { "id": 77, "children": [ { "id": 146, "children": [ { "id": 147, "children": [ { "id": 148, "children": [ { "id": 149, "children": [] } ] } ] } ] } ] } ] } ];

// 删除id为149的节点
const processedArray = removeNodeById(originalArray, 149);
console.log(processedArray);

执行后，id=149的节点会被移除，它的父节点148的children会变成空数组。

可选：纯函数版本（不修改原数组） #

上面的实现会直接修改原数组中的节点children，如果需要保留原数据，可以做个浅拷贝，改成纯函数：

function removeNodeById(arr, targetId) {
  return arr.map(node => ({ ...node })) // 先拷贝节点，避免修改原数组
    .filter(node => {
      if (node.id === targetId) {
        return false;
      }
      if (node.children?.length) {
        node.children = removeNodeById(node.children, targetId);
      }
      return true;
    });
}

这种方式不管数组嵌套多少层，都能精准遍历到每个节点并完成过滤，完全适配你的需求。

内容的提问来源于stack exchange，提问作者Никита Середа