如何從 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