如何從數組中刪除 id

Question

我正在嘗試遍歷數組並在每個children數組上使用Array.prototype.filter()方法來查找其鍵與指定元素匹配的元素。

然后，我使用Array.prototype.splice()從相應的children數組中刪除結果，但結果返回undefined 。

 const inputArray = [ "Oxygen-a3b8be32-c36e-a02e-37f4-a35239e0cedb", "633ac872e78fa7ebee03b8bf", "5e69dbd7-5fee-67a9-c73f-4656f9b90715", "d484558b-4717-b0b8-db07-68288afb4f6a", "63922aac4ff08f52d71fa891", "33a3182b-93a4-84b9-4c49-c955a8416197", ]; const originalArray = [{ title: "Animals", key: "d484558b-4717-b0b8-db07-68288afb4f6a", children: [{ title: "Color", key: "63922aac4ff08f52d71fa891", children: [{ title: "Black", key: "Black-9e994ed2-823b-d1d6-4613-91d43f570fec", }, { title: "White", key: "White-5d0b102a-2555-8f7c-d471-cc82a5bd9c01", }, ], }, ], }, { title: "Elements", key: "5e69dbd7-5fee-67a9-c73f-4656f9b90715", children: [{ title: "Non metals", key: "633ac872e78fa7ebee03b8bf", children: [{ title: "Carbon", key: "Carbon-e443daa4-def4-9830-796e-ee8c5a1f41d4", }, { title: "Nitrogen", key: "Nitrogen-c2922569-0b2d-0e07-454d-d8411af701b7", }, { title: "Oxygen", key: "Oxygen-a3b8be32-c36e-a02e-37f4-a35239e0cedb", }, ], }, ], }, { title: "Pl.nets", key: "33a3182b-93a4-84b9-4c49-c955a8416197", children: [{ title: "Composition", key: "63b3d5cd12c06ba7ce353f76", children: [{ title: "Chthonian pl.net", key: "Chthonian pl.net-b3c593c1-d29e-5e14-1b11-2241e8ef2be6", }, { title: "Carbon pl.net", key: "Carbon pl.net-07d67d62-afcf-fbcf-a8e8-75081cb44c2f", }, ], }, ], }, ]; console.log( " ~ file: TranferTree.misc.js:152 ~ onCheck ~ outputArray", originalArray.forEach(e => { e.children.forEach((c, i) => { if (inputArray.includes(c.key)) { e.children.splice(i, 1); } else { c.children.forEach((cc, j) => { if (inputArray.includes(cc.key)) { c.children.splice(j, 1); } }); } }); }) );

注意：例如在Elements => 5e69dbd7-5fee-67a9-c73f-4656f9b90715兒童Non metals => 633ac872e78fa7ebee03b8bf我只用這個key刪除object => Oxygen-a3b8be32-c36e-a02e-37f4-a35239e0cedb其他未找到的對象也適用於例如Composition => 63b3d5cd12c06ba7ce353f76或Pl.nets => 33a3182b-93a4-84b9-4c49-c955a8416197 。

Answer 1

您需要從數組的末尾開始迭代，因為splice會更改 followind 項的索引。

 const keys = ["Oxygen-a3b8be32-c36e-a02e-37f4-a35239e0cedb", "633ac872e78fa7ebee03b8bf", "5e69dbd7-5fee-67a9-c73f-4656f9b90715", "d484558b-4717-b0b8-db07-68288afb4f6a", "63922aac4ff08f52d71fa891", "33a3182b-93a4-84b9-4c49-c955a8416197"], data = [{ title: "Animals", key: "d484558b-4717-b0b8-db07-68288afb4f6a", children: [{ title: "Color", key: "63922aac4ff08f52d71fa891", children: [{ title: "Black", key: "Black-9e994ed2-823b-d1d6-4613-91d43f570fec" }, { title: "White", key: "White-5d0b102a-2555-8f7c-d471-cc82a5bd9c01" }] }] }, { title: "Elements", key: "5e69dbd7-5fee-67a9-c73f-4656f9b90715", children: [{ title: "Non metals", key: "633ac872e78fa7ebee03b8bf", children: [{ title: "Carbon", key: "Carbon-e443daa4-def4-9830-796e-ee8c5a1f41d4" }, { title: "Nitrogen", key: "Nitrogen-c2922569-0b2d-0e07-454d-d8411af701b7" }, { title: "Oxygen", key: "Oxygen-a3b8be32-c36e-a02e-37f4-a35239e0cedb" }] }] }, { title: "Pl.nets", key: "33a3182b-93a4-84b9-4c49-c955a8416197", children: [{ title: "Composition", key: "63b3d5cd12c06ba7ce353f76", children: [{ title: "Chthonian pl.net", key: "Chthonian pl.net-b3c593c1-d29e-5e14-1b11-2241e8ef2be6" }, { title: "Carbon pl.net", key: "Carbon pl.net-07d67d62-afcf-fbcf-a8e8-75081cb44c2f" }] }] }], remove = keys => { const fn = array => { let i = array.length; while (i--) { if (keys.includes(array[i].key)) array.splice(i, 1); else if (array[i].children) fn(array[i].children); } }; return fn; }; remove(keys)(data); console.log(data);

 .as-console-wrapper { max-height: 100%;important: top; 0; }

Answer 2

由於您想保留原始的 object 引用，因此效率會稍微低一些，但是您可以通過遞歸 function 調用來實現。 它提供與您的代碼相同的 output ，但它正確地記錄了最終結構，而您的記錄了.forEach()的返回值，這是設計上未定義的。

 const inputArray = [ "Oxygen-a3b8be32-c36e-a02e-37f4-a35239e0cedb", "633ac872e78fa7ebee03b8bf", "5e69dbd7-5fee-67a9-c73f-4656f9b90715", "d484558b-4717-b0b8-db07-68288afb4f6a", "63922aac4ff08f52d71fa891", "33a3182b-93a4-84b9-4c49-c955a8416197", ]; const originalArray = [{ title: "Animals", key: "d484558b-4717-b0b8-db07-68288afb4f6a", children: [{ title: "Color", key: "63922aac4ff08f52d71fa891", children: [{ title: "Black", key: "Black-9e994ed2-823b-d1d6-4613-91d43f570fec", }, { title: "White", key: "White-5d0b102a-2555-8f7c-d471-cc82a5bd9c01", }, ], }, ], }, { title: "Elements", key: "5e69dbd7-5fee-67a9-c73f-4656f9b90715", children: [{ title: "Non metals", key: "633ac872e78fa7ebee03b8bf", children: [{ title: "Carbon", key: "Carbon-e443daa4-def4-9830-796e-ee8c5a1f41d4", }, { title: "Nitrogen", key: "Nitrogen-c2922569-0b2d-0e07-454d-d8411af701b7", }, { title: "Oxygen", key: "Oxygen-a3b8be32-c36e-a02e-37f4-a35239e0cedb", }, ], }, ], }, { title: "Pl.nets", key: "33a3182b-93a4-84b9-4c49-c955a8416197", children: [{ title: "Composition", key: "63b3d5cd12c06ba7ce353f76", children: [{ title: "Chthonian pl.net", key: "Chthonian pl.net-b3c593c1-d29e-5e14-1b11-2241e8ef2be6", }, { title: "Carbon pl.net", key: "Carbon pl.net-07d67d62-afcf-fbcf-a8e8-75081cb44c2f", }, ], }, ], }, ]; function filterChildrenById (item, ids) { if (item.children) { for (let i = 0; i < item.children.length; i++) { let child = item.children[i]; if (ids.includes(child.key)) { item.children.splice(i, 1); // Reduce index because we removed an item so indexing will // be off if we don't do this i--; } else if (Array.isArray(child.children)) { child = filterChildrenById(child, ids); } } } return item; } function filterData(data, ids) { data.forEach(item => filterChildrenById(item, ids)) return data; } console.log( " ~ file: TranferTree.misc.js:152 ~ onCheck ~ outputArray", filterData(originalArray, inputArray) );