如何从 JavaScript 的嵌套数组中删除元素？

Question

假设我有一个如下所示的嵌套数组。现在我想删除元素但不删除子元素。我想让它的子元素值成为父数组/子元素值。

const steps =  [
       {
         step_id: 100,
         type: 'TEXT',
         title: null,
         item_id: 1,
         children: [
           {
             step_id: 102,
             type: 'TEXT',
             title: null,
             item_id: 1,
             children: [
               {
                 step_id: 104,
                 type: 'TEXT',
                 title: null,
                 item_id: 1,
                 children: [

                 ]
               }
             ]
           }
         ]
       }
     ];

例如，当step_id=102及其其他元素时，我想删除它，并使其子值变为父子值。我想要这样的结果。

result=  steps: [
 {
   step_id: 100,
   type: 'TEXT',
   title: null,
   item_id: 1,
   children: [
     {
       step_id: 104,
       type: 'TEXT',
       title: null,
       item_id: 1,
       children: [

       ]
     }
   ]
 }
]

我尝试了下面的代码，但它没有返回正确的结果。 请帮我。

谢谢你。

 const steps = [ { step_id: 100, type: 'TEXT', title: null, item_id: 1, children: [ { step_id: 102, type: 'TEXT', title: null, item_id: 1, children: [ { step_id: 104, type: 'TEXT', title: null, item_id: 1, children: [ ] } ] } ] } ]; const removeItem ={step_id: 102, type: "TEXT", title: null, item_id: 1, children: Array(0)}; const removeElement = (steps, removeItem) => { steps.forEach((step) => { if (step.step_id == removeItem.step_id) { steps = step.children; } else { removeElement(step.children, removeItem); } }); //console.log(steps); return steps }; console.log(removeElement(steps, removeItem))

Answer 1

您只是重新分配 steps 参数变量，因此原始 object 不会发生突变。
使用 splice 将找到的节点替换为其插入的子节点。

我个人更喜欢 flatMap 和一点点 object 克隆。 但是，如果您对原始 object 的突变没意见，那就没问题了。

 const steps = [{ step_id: 100, type: 'TEXT', title: null, item_id: 1, children: [{ step_id: 102, type: 'TEXT', title: null, item_id: 1, children: [{ step_id: 104, type: 'TEXT', title: null, item_id: 1, children: [ ] }] }] }]; const removeItem = { step_id: 102, type: "TEXT", title: null, item_id: 1, children: Array(0) }; const removeElement = (steps, removeItem) => { steps.forEach((step, i) => { if (step.step_id == removeItem.step_id) { steps.splice(i,1,...step.children); } else { removeElement(step.children, removeItem); } }); //console.log(steps); return steps }; console.log(removeElement(steps, removeItem))

Answer 2

如果 step_id 是唯一的，你可以试试这个

const steps = [{
  step_id: 100,
  type: 'TEXT',
  title: null,
  item_id: 1,
  children: [{
    step_id: 102,
    type: 'TEXT',
    title: null,
    item_id: 1,
    children: [{
      step_id: 104,
      type: 'TEXT',
      title: null,
      item_id: 1,
      children: [

      ]
    }]
  }]
}];

const removeItem = {
  step_id: 102,
  type: "TEXT",
  title: null,
  item_id: 1,
  children: Array(0)
};

const removeElement = (steps, removeItemId) => {
  if (!steps || steps.length === 0) {
    return false;
  }

  var id = null;
  steps.some((item, i) => {
    id = (item.step_id === removeItemId) ? i : null;
    return i !== null;
  });

  if (id !== null) {
    steps.splice(id, 1);
    return true;
  }

  return steps.some(item => removeElement(item.children, removeItemId));
};

console.log(removeElement(steps, removeItem.step_id)); // should be true

Answer 3

在此链接中，您可以找到不同的解决方案。

https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/flat