如何过滤嵌套的 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);