如果父屬性鍵已被洗掉，則從陣列中洗掉

如果父物件被洗掉，我目前正在嘗試從物件陣列中洗掉。

我的陣列如下所示：

const items = [
  {
    id: '1'
    generatedFrom: undefined
  },
  {
    id: '2',
    generatedFrom: '1',
  },
  {
    id: '3',
    generatedFrom: '2'
  },
  {
    id: '4',
    generatedFrom: '1'
  }
]

我有一個方法，它根據我傳遞給方法的 id 過濾掉物件：

const removeFromArray = (id: string) => {
   const filtered = items.filter(item => item.id !== id); 
}

這給了我在洗掉父物件方面我希望得到的正確結果。但是，我遇到的問題是這應該對陣列中的其余物件產生連鎖反應。

如果你看上面的例子：

• 如果我洗掉 id2那么它應該洗掉items[1]
• 正如items[2]從 id 生成的一樣，2這個也應該被洗掉。
• items[3]應該保持存在，因為父級仍然存在。

這可能是一個包含許多專案的陣列，我不確定如何處理它。

當前問題的示例：

const items = [
  {
    id: 1,
    generatedFrom: undefined
  },
  {
    id: 2,
    generatedFrom: 1
  },
  { 
    id: 3,
    generatedFrom: 2
  },
  {
    id: 4,
    generatedFrom: 3
  },
  {
    id: 5,
    generatedFrom: 4
  },
  {
    id: 6,
    generatedFrom: 1
  }
]

const removeFromArray = (id) => {
 return items.filter(item => item.id !== id && item.generatedFrom !== id);
}

console.log(removeFromArray(2));

// Expected Output:

const expected = [
  {
    id: 1,
    generatedFrom: undefined
  },
  {
    id: 6,
    generatedFrom: 1
  }
]

uj5u.com熱心網友回復：

您可以使用遞回函式，我建議您使用 aSet以避免無限回圈或重復洗掉：

const items = [
  {
    id: 1,
    generatedFrom: undefined
  },
  {
    id: 2,
    generatedFrom: 1
  },
  { 
    id: 3,
    generatedFrom: 2
  },
  {
    id: 4,
    generatedFrom: 3
  },
  {
    id: 5,
    generatedFrom: 4
  },
  {
    id: 6,
    generatedFrom: 1
  }
]

const ids = new Set();

const deleteById = (id, items) => {
  ids.delete(id);
  let filtered = items.filter(item => {
    if (item.id === id || item.generatedFrom === id) {
      if(item.id) ids.add(item.id);
      return false;
    }
    return true;
  });
  
  const it = ids.values();
  let next = it.next();
  while (!next.done) {
   const value = next.value;
   filtered = deleteById(value, filtered);
   next = it.next();
  }
  
  return filtered;
}


console.log(deleteById(2, items));

uj5u.com熱心網友回復：

我相信您應該處理陣列物件本身而不是多個回圈。

無論如何，您可以使用遞回方法來洗掉與洗掉的 generatedId 相同的父 id。它簡短而容易。

請參閱下面的片段：

const items = [
  {
    id: 1,
    generatedFrom: undefined
  },
  {
    id: 2,
    generatedFrom: 1
  },
  { 
    id: 3,
    generatedFrom: 2
  },
  {
    id: 4,
    generatedFrom: 3
  },
  {
    id: 5,
    generatedFrom: 4
  },
  {
    id: 6,
    generatedFrom: 1
  }
]

const removeFromArray = (removeId, items) => {
  items = items.filter(item => item.id !== removeId);
  let ele = items.find(item=> item.generatedFrom == removeId);

  if(ele){
    return removeFromArray(ele.id, items);
  }else{
    return items;
  }
}
console.log(removeFromArray(2, items));

// Expected Output:

const expected = [
  {
    id: 1,
    generatedFrom: undefined
  },
  {
    id: 6,
    generatedFrom: 1
  }
]

uj5u.com熱心網友回復：

您可以嘗試遞回：

const items = [ { id: 1, generatedFrom: undefined }, { id: 2, generatedFrom: 1 }, { id: 3, generatedFrom: 2 }, { id: 4, generatedFrom: 3 }, { id: 5, generatedFrom: 4 }, { id: 6, generatedFrom: 1 } ]

const removeFromArray = (id, items) => {
  items = items.filter(x => x.id !== id);  // remove element with id == id
  
  // recursively find orphan objects
  let index = items.findIndex(obj => obj.generatedFrom === id);
  if (index !== -1) {
     let newId = items[index].id;
     items = items.filter(x => x.generatedFrom !== id);
     return removeFromArray(newId, items)
  }
  else return items;
}

console.log(removeFromArray(2, items));

兩步：

1. id === id用;洗掉專案
2. 遞回查找從原始物件創建的所有物件，id并通過過濾結果陣列呼叫函式。

uj5u.com熱心網友回復：

因為理論上你可以有無限的深度，我認為Array.prototype.*這里一個電話是不夠的。初學者的方法是遞回，但您可以將其調整為佇列程序：

const items = [
  {
    id: 1,
    generatedFrom: undefined
  },
  {
    id: 2,
    generatedFrom: 1
  },
  { 
    id: 3,
    generatedFrom: 2
  },
  {
    id: 4,
    generatedFrom: 3
  },
  {
    id: 5,
    generatedFrom: 4
  },
  {
    id: 6,
    generatedFrom: 1
  }
];

const removeFromArray=(id:number)=>{
    let queue:number[]=[id];
    let rst=[...items];
    while(queue.length>0){
        let hd=queue.shift();
        rst=rst.filter((item)=>{
          if(item.id==hd){
            return false;
          }
          if(item.generatedFrom==hd){
            queue.push(item.id);
            return false;
          }
          return true;
        });
    }
    return rst;
};

console.log(removeFromArray(2));

在線游樂場

洗掉2會給你

[{
  "id": 1,
  "generatedFrom": undefined
}, {
  "id": 6,
  "generatedFrom": 1
}]

標籤：javascript 打字稿

上一篇：導航欄在頁面加載時保持打開狀態，不應

下一篇：如何在<ul>標簽中顯示<p>標簽？