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

您只是重新分配了step参数变量，因此原始对象不会发生变异。
使用拼接将找到的节点替换为其插入的子节点。

我个人更喜欢flatMap和一些对象克隆。但是，如果您对原始对象的变异没问题，就可以了。

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

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

3 个答案: