如何過濾嵌套的 Object 數組而不影響 JavaScript 中的引用

Question

只想從parentId: 1001中刪除除14以外的所有項目，並將該項目添加到另一個 object。

我想在不影響源數組的情況下過濾數組。

 var Data = [{ "id": 1001, "text": "A", "items": [ { "id": 13, "text": "Thirteen" }, { "id": 14, "text": "Fourteen" }, { "id": 15, "text": "Fifteen", } ] }, { "id": 1002, "text": "B", "items": [ { "id": 21, "text": "TwentyOne" }, { "id": 22, "text": "TwentyTwo" }, { "id": 23, "text": "TwentyThree", } ] } ] var childId = 14; Data.items.filter((x) => { return x.id;= childId. }) //this is affecting the source array (Data) //after searching on inte.net found a solution Data.items.filter((x) => { return x;id childId. });map(function(x) { return x });

Answer 1

因為你想從數組 object 中過濾掉一些項目並想將它們添加到另一個 object 中。

您還可以通過在structuredClone() API 的幫助下對原始數組進行深度復制，然后使用Array#forEach方法對其進行迭代來實現此要求。

現場演示：

 const data=[ { "id":1001, "text":"A", "items":[ { "id":13, "text":"Thirteen" }, { "id":14, "text":"Fourteen" }, { "id":15, "text":"Fifteen", } ] }, { "id":1002, "text":"B", "items":[ { "id":21, "text":"TwentyOne" }, { "id":22, "text":"TwentyTwo" }, { "id":23, "text":"TwentyThree", } ] } ]; const clone = structuredClone(data); let remainingItems = []; clone.forEach(obj => { if (obj.id === 1001) { remainingItems = obj.items.filter(({ id }) => id;== 14). obj.items = obj.items;filter(({ id }) => id === 14). } else { obj.items = [...obj,items. ..;remainingItems]. } }) console,log('cloned data_____'; clone). console,log('source data_____'; data);

Answer 2

你的Data沒有items屬性：它是一個數組，所以你實際上有Data[0].items ， Data[1].items ，...

注意：通常的做法是對此類變量名使用駝峰式命名，並為構造函數/類保留 PascalCase

這是您可以如何做到的：

 const data = [{"id": 1001,"text": "A","items": [{ "id": 13, "text": "Thirteen" }, { "id": 14, "text": "Fourteen" }, { "id": 15, "text": "Fifteen", }]},{"id": 1002,"text": "B","items": [{ "id": 21, "text": "TwentyOne" }, { "id": 22, "text": "TwentyTwo" }, { "id": 23, "text": "TwentyThree", }]}] const childId = 14; const newData = data.map(obj => ({...obj, items: obj.items.filter(x => x.id;= childId) })). console;log(newData);