javascript - 从另一个数组中的数组中删除对象

Question

我有以下数据结构

menu: [   { id: 1, title: 'Test 1', children: [] },
          { id: 2, title: 'Test 2', children: [
              { id: 5, title: 'Test 5', children: [] },
              { id: 6, title: 'Test 6', children: [] },
              { id: 7, title: 'Test 7', children: [] },
              { id: 8, title: 'Test 8', children: [] },
            ] },
          { id: 3, title: 'Test 3', children: [
              { id: 9, title: 'Test 9', children: [] },
              { id: 10, title: 'Test 10', children: [] },
              { id: 11, title: 'Test 11', children: [] },
              { id: 12, title: 'Test 12', children: [] },
            ]  },
          { id: 4, title: 'Test 4', children: [] },
        ]

如何删除标题为“测试 5”的对象？或者来自children arr 中的子数组？

onDeleteClick(item) {
    const menuCopy = JSON.parse(JSON.stringify(this.menu));
    const index = menuCopy.indexOf(item);
    if (index !== -1) {
      menuCopy.splice(index, 1);
    } else {
      menuCopy.map((el) => {
        if (el.children.length) {
          el.children.map((child) => {
            if (child.Id === item.Id) {
              console.log(child);
            }
          });
        }
      });
    }
    this.setMenu(menuCopy);
  }

我现在被困住了。我认为这里应该使用递归，但我不知道如何实现。

Answer 1

const menu = [ { id: 1, title: 'Test 1', children: [] },
    { id: 2, title: 'Test 2', children: [
        { id: 5, title: 'Test 5', children: [] },
        { id: 6, title: 'Test 6', children: [
            { id: 5, title: 'Test 5', children: [] },
            { id: 7, title: 'Test 7', children: [] },
            { id: 8, title: 'Test 8', children: [] }
         ] },
        { id: 7, title: 'Test 7', children: [] },
        { id: 8, title: 'Test 8', children: [] },
      ] },
    { id: 3, title: 'Test 3', children: [
        { id: 9, title: 'Test 9', children: [] },
        { id: 10, title: 'Test 10', children: [] },
        { id: 11, title: 'Test 11', children: [] },
        { id: 12, title: 'Test 12', children: [] },
      ]  },
    { id: 4, title: 'Test 4', children: [] },
  ];

const excludeChildrenFromTitle = (arr, excludedChildTitle) => {
  return arr.map((item) => {
      const children = excludeChildrenFromTitle(item.children.filter((child) => child.title !== excludedChildTitle), excludedChildTitle);
     return {
       ...item,
       children
     }
  });
};

console.log(excludeChildrenFromTitle(menu, 'Test 5'))

对整个菜单数组使用一个简单的映射，然后从每个菜单项中过滤每个子数组就可以完成这项工作。

我也更新了答案，以从子数组中删除排除的子项。