javascript - 使用递归从嵌套数组中删除子项

Question

我希望能够从具有子对象的对象数组中删除一个对象。我立即认为这是递归的工作，但我无法让我的递归函数正常工作。我想到使用reduce来重建没有我想要删除的对象的数据结构。该函数应该接受两个参数:嵌套对象数组和 Id。

我的要求是:删除该节点及其下面的所有子节点。

乍一看，这似乎很容易，但我发现的挑战是删除子级并保持整个数据结构完整。通过根据 id 进行过滤来删除父级很简单，但嵌套的子级会带来问题。

我的数据结构如下所示:

const data = [{
  id: 'BFQEA1W2RK1YRETZ9343',
  name: 'Cover',
  activityId: 'BFQEA1W2RK1YRETZ9343',
  nodeType: 'activity',
  suppressed: true,
  hidden: true
},
{
  children: [
    {
      id: 'ZNRAE749BSD0CTGHY888',
      name: 'Consultants, Reviewers, and National Geographic Exploration',
      activityId: 'ZNRAE749BSD0CTGHY888',
      nodeType: 'activity',
      suppressed: false,
      hidden: false
    },
    {
      id: 'JZLS37EVZQM22H9Q4655',
      name: 'The National Geographic Approach',
      activityId: 'JZLS37EVZQM22H9Q4655',
      nodeType: 'activity',
      suppressed: false,
      hidden: false
    },
  ]
}
]

如果我将此 Id(ZNRAE749BSD0CTGHY888) 传递给函数，我的预期数据结果应该是:

const expected =  [{
  id: 'BFQEA1W2RK1YRETZ9343',
  name: 'Cover',
  activityId: 'BFQEA1W2RK1YRETZ9343',
  nodeType: 'activity',
  suppressed: true,
  hidden: true
},
{
  children: [

    {
      id: 'JZLS37EVZQM22H9Q4655',
      name: 'The National Geographic Approach',
      activityId: 'JZLS37EVZQM22H9Q4655',
      nodeType: 'activity',
      suppressed: false,
      hidden: false
    },
  ]
}
]

我的函数如下所示:

 findNode = (id, arr) => {
    return arr.reduce((a, item) => {
      // if (item.id === id) {
      //   console.log('here');
      //   return item;
      // }
      if (item.id !== id) {
        a.push(item);
      }
      if (item.children) {
        return this.findNode(id, item.children);
      }
    }, []);
  };

函数的reduce累加器未定义，但我不确定为什么。它应该创建一个新数组。我在这里缺少什么？

在我看来，这似乎可行，但它失败了。也许我的方法完全不对劲。我应该如何解决这个问题？

Answer 1

在您的代码中，您没有返回累加器。这就是为什么你变得不确定。并且没有理由对您不推送的项目的子项进行递归，因此您应该将递归嵌套在 if 下。

您可以使用reduce()循环遍历根数组。如果 id 匹配，则返回并继续。否则，您可以递归地将过滤器传递给子级并推送到返回数组:

const data = [{id: 'BFQEA1W2RK1YRETZ9343',name: 'Cover',activityId: 'BFQEA1W2RK1YRETZ9343',nodeType: 'activity',suppressed: true,hidden: true},{children: [{id: 'ZNRAE749BSD0CTGHY888',name: 'Consultants, Reviewers, and National Geographic Exploration',activityId: 'ZNRAE749BSD0CTGHY888',nodeType: 'activity',suppressed: false,hidden: false},{id: 'JZLS37EVZQM22H9Q4655',name: 'The National Geographic Approach',activityId: 'JZLS37EVZQM22H9Q4655',nodeType: 'activity',suppressed: false,hidden: false},]}]


function filterID(id, data) {
  return data.reduce((arr, item) => {
    if (item.id != id) {
      if (item.children) item.children = filterID(id, item.children)
      arr.push(item)
    }
    return arr  // <<-- need to return the accumulator  
  }, [])
}
console.log(filterID("ZNRAE749BSD0CTGHY888", data))