javascript - 遍历嵌套数组，通过id找到具体的叶子节点，并移除

Question

JSFiddle

我有一个最多 6 层的嵌套数组。第 6 级称为 gls，它保存数据库中的 gl 对象。我需要做的是找到一个特定的 gl 并将其从整个数组中删除。我能够使用以下函数找到特定元素；

const removeFromData = function(nodes, id) {
  return nodes.some((node) => {
    if (node.gls) {
      node.gls.forEach((gl) => {
        if (gl.id === id) {
          console.log(gl, id);
        }
      });
    } else if (node.children) {
      return removeFromData(node.children, id);
    }
  });
}

但是，我正在努力从 data 数组中实际删除它。尝试通过 data.indexOf(gl) 获取索引显然会返回 -1，因为它不会搜索嵌套元素。实现此目标的最佳方法是什么？

const id = 1000;

const data = [{
    "id": 1, "name": "Node 1", "children": [{
      "id": 2, "name": "Node 1.1", "children": [{
        "id": 4, "name": "Node 1.1.1", "leaf": true, "children": [], "gls": [{
          "id": 1000, "name": "GL1", "code": "0100"
        }, {
          "id": 1001, "name": "GL2", "code": "0200"
        }]
      }, {
        "id": 5, "name": "Node 1.1.2", "leaf": true, "children": [], "gls": [{
          "id": 2000, "name": "GL3", "code": "0300"
        }, {
          "id": 2001, "name": "GL4", "code": "0400"
        }]
      }]
    }, {
      "id": 3, "name": "Node 1.2", "children": [{
        "id": 6, "name": "Node 1.2.1", "leaf": true, "children": [], "gls": [{
          "id": 3000, "name": "GL5", "code": "0500"
        }, {
          "id": 3001, "name": "GL6", "code": "0600"
        }]
      }]
    }]
  },
  {
    "id": 7, "name": "Node 2", "children": [{
      "id": 8, "name": "Node 2.1", "children": [{
        "id": 9, "name": "Node 2.1.1", "leaf": true, "children": [], "gls": [{
          "id": 4000, "name": "GL7", "code": "0700"
        }, {
          "id": 4001, "name": "GL8", "code": "0800"
        }]
      }]
    }]
  }
];


let removeFromData = function(nodes, id) {
  return nodes.some((node) => {
    if (node.gls) {
      node.gls.forEach((gl) => {
        if (gl.id === id) {
          document.querySelector('#target').innerText = `found ${gl.name}, ${gl.id} with needle ${id}`;
        }
      });
    } else if (node.children) {
      return removeFromData(node.children, id);
    }
  });
}

removeFromData(data, id);

<p id="target"></p>

Answer 1

forEach 将三个参数传递给回调，第二个参数是被访问条目的索引。因此，您可以将该索引与 splice 一起使用(如果您想就地修改):

const removeFromData = function(nodes, id) {
  return nodes.some((node) => {
    if (node.gls) {
      node.gls.forEach((gl, index) => {
// -----------------------^^^^^^^
        if (gl.id === id) {
          //console.log(gl, id);
          node.gls.splice(index, 1); // <=== Removes the entry
        }
      });
    } else if (node.children) {
      return removeFromData(node.children, id);
    }
  });
}

---

我注意到您正在使用 some，这表明您希望在找到该条目时停止并且可能还返回一个指示成功/失败的标志。如果是这样，我会在 nodes.gls 搜索中使用 some 而不是 forEach 或者可能使用 findIndex .使用一些:

const removeFromData = function(nodes, id) {
  return nodes.some((node) => {
    if (node.gls) {
      return node.gls.some((gl, index) => {
        if (gl.id === id) {
          //console.log(gl, id);
          node.gls.splice(index, 1); // <=== Removes the entry
          return true;
        }
      });
    } else if (node.children) {
      return removeFromData(node.children, id);
    }
  });
}

使用findIndex:

const removeFromData = function(nodes, id) {
  return nodes.some((node) => {
    if (node.gls) {
      const index = node.gls.findIndex((gl) => {
        return gl.id === id;
      });
      if (index === -1) {
        return false;
      }
      node.gls.splice(index, 1);
      return true;
    } else if (node.children) {
      return removeFromData(node.children, id);
    }
  });
}