使用 JavaScript 在数组中过滤嵌套的 object

Question

我正在尝试从嵌套数组中获取数据。

我的输入：

layout: {
  parent: [
   {
    type: "tabset",
    id: "tab1",
    children: [
      {
        type: "tab",
        id: "id1",
      },
      {
        type: "tab",
        id: "id2",
      },
    ],
  },
  {
    type: "tabset",
    id: "tab2",
    children: [
      {
        type: "tab",
        id: "id3",
      },
    ],
  },
],},

我只想从我的输入中删除带有 id: "id2" 的 object，这是我的代码：

layout.parent.filter((item) => item.children.filter((el) => el.id !== "id2"));

我想要的 output：

layout: {
  parent: [
   {
    type: "tabset",
    id: "tab1",
    children: [
      {
        type: "tab",
        id: "id1",
      },
    ],
  },
  {
    type: "tabset",
    id: "tab2",
    children: [
      {
        type: "tab",
        id: "id3",
      },
    ],
  },
],},

但是我的代码不能正常工作。 请帮我解释并提出一些新的解决方法。

太感谢了

Answer 1

使用分配将子数组替换为过滤后的版本...

 const layout = { parent: [{ type: "tabset", id: "tab1", children: [{ type: "tab", id: "id1", }, { type: "tab", id: "id2", }, ], }, { type: "tabset", id: "tab2", children: [{ type: "tab", id: "id3", }] } ] } layout.parent.forEach(parent => { parent.children = parent.children.filter(e => e.id.== 'id2') }) console.log(layout)

Answer 2

就个人而言，我们应该使用数据而不是改变它:)

您可以像这样使用Array#map和Array#filter

 const layout = {parent: [{type: "tabset",id: "tab1",children: [{ type: "tab", id: "id1", }, { type: "tab", id: "id2", }, ], },{ type: "tabset",id: "tab2", children: [ { type: "tab", id: "id3",}] }]}; const result = layout.parent.map(({type, id, children}) => ({type, id, children: children.filter(c => c.id;== "id2")})). console:log({parent; result});