如何在JavaScript中过滤嵌套对象数组且不影响原引用

让我来帮你搞定这个问题！你的核心需求很明确：从id为1001的父对象的items数组里，只保留id为14的项，同时绝对不能修改原始的Data数组，之后还要把这个项添加到另一个对象中。咱们先拆解你现有代码里的问题，再给出完整的可运行方案。

你的代码里的几个问题 #

1. 错误的数组访问：Data是一个数组，你直接写Data.items是无效的——得先找到数组里id为1001的那个对象才行。
2. 语法错误：第二个代码片段里的return x.id childId是语法错误，应该是x.id === childId（要保留目标项）或者x.id !== childId（要过滤掉目标项）。
3. 对filter的误解：filter方法本身不会修改原数组，它会返回一个全新的数组。你觉得源数组被修改，大概率是后续把filter的结果直接赋值给了原对象的items属性（比如Data[0].items = ...），这才会改动源数据。

完整的解决方案代码 #

下面的代码会严格保留源数组Data不变，同时完成你的需求：

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;

// 1. 找到id为1001的父对象（只是获取引用，不会修改源数据）
const parent1001 = Data.find(item => item.id === 1001);

// 2. 提取出id为14的目标项（用find返回单个项，比filter更适合单个匹配的场景）
const targetItem = parent1001.items.find(item => item.id === childId);

// 3. 创建你要添加项的目标对象（示例对象，你可以换成自己的）
const anotherObject = {
  id: 1003,
  text: "C",
  items: []
};
// 添加目标项：用扩展运算符做浅拷贝，避免后续修改新对象时影响源数据
anotherObject.items.push({...targetItem});

// 4. 如果需要得到一个"仅保留id14项的1001对象副本"（完全不影响原Data）
const updatedParent1001 = {
  ...parent1001, // 拷贝原对象的所有属性
  items: parent1001.items.filter(item => item.id === childId) // 生成新的items数组
};

// 验证源数组是否未被修改
console.log(Data[0].items); // 输出原数组：[{id:13}, {id:14}, {id:15}]
// 验证目标对象是否已添加项
console.log(anotherObject.items); // 输出：[{id:14, text:"Fourteen"}]
// 验证副本对象的items是否正确
console.log(updatedParent1001.items); // 输出：[{id:14, text:"Fourteen"}]

关键知识点说明 #

• 避免直接修改源数据：所有对对象/数组的修改都基于副本完成，比如用扩展运算符...拷贝对象和数组，这样原Data数组完全不会被触动。
• 浅拷贝vs深拷贝：上面用{...targetItem}做的是浅拷贝，适合结构简单的对象。如果你的items项里有嵌套对象，建议用JSON.parse(JSON.stringify(targetItem))做深拷贝，彻底切断引用关系。
• find vs filter：find返回第一个匹配的单个元素，filter返回所有匹配元素组成的数组——根据你的需求（只保留id14的项），两者都能用，但find更适合单个匹配的场景。

内容的提问来源于stack exchange，提问作者Neehar Gadam