JavaScript 展开运算符是浅拷贝吗？

JavaScript 的展开运算符（...）看似强大，实则仅执行“一层浅拷贝”——它能独立复制对象的顶层原始类型属性（如字符串、数字），但对嵌套的对象或数组，只复制引用而非实际数据，导致修改深层属性时新旧对象相互影响；这虽提升了性能和简洁性，却极易引发隐蔽的bug，尤其在状态管理或数据隔离场景中；若需真正互不影响的副本，现代开发应优先选用原生 `structuredClone()` 实现安全深拷贝，兼顾兼容性与语义正确性。

JavaScript 展开运算符对对象仅做一层浅拷贝：基本类型值被独立复制，而嵌套对象仍共享引用；因此修改原始对象的深层属性（如 `x.address.city`）会同步影响拷贝对象，但修改顶层属性（如 `x.name`）则不会。

在 JavaScript 中，展开运算符（...）常被误认为能实现“完整复制”，但实际上它只执行浅拷贝（shallow copy）。这意味着：

• 对象的一级属性中，原始类型（如字符串、数字、布尔值）会被真正复制，各自拥有独立内存；
• 但引用类型（如对象、数组、函数）仅复制其内存地址（即引用），新旧对象仍指向同一底层数据结构。

以下代码清晰展示了这一行为：

const x = {
  name: "ABC",
  email: "abc@example.com",
  mob: "12345",
  address: {
    city: "Mumbai",
    state: "Maharashtra"
  }
};

const y = { ...x }; // 浅拷贝：仅复制 x 的第一层属性

x.name = "XYZ"; // 修改顶层原始类型 → y.name 不受影响
console.log(x.name, y.name); // 输出：XYZ ABC

x.address.city = "Pune"; // 修改嵌套对象属性 → y.address 与 x.address 指向同一对象
console.log(x.address.city, y.address.city); // 输出：Pune Pune

? 关键解析：

• y = { ...x } 等价于创建一个新对象，并逐个赋值 y.name = x.name、y.address = x.address；
• x.name 是字符串（原始类型），赋值时发生值拷贝；
• x.address 是对象（引用类型），赋值时仅拷贝指针，y.address 和 x.address 共享同一内存地址。

✅ 如何实现真正的深拷贝？
现代浏览器推荐使用原生 API structuredClone()（ES2022+），它支持大多数可序列化值（包括嵌套对象、数组、Date、Map、Set 等），且语义安全、性能良好：

const y = structuredClone(x); // ✅ 深拷贝，完全隔离
x.address.city = "Pune";
console.log(y.address.city); // Mumbai —— 不受影响

⚠️ 注意事项：

• structuredClone() 不支持函数、undefined、Symbol、循环引用、DOM 节点或不可克隆对象（如 Error 实例）；遇到不支持类型会抛出 DataCloneError；
• 若需兼容旧环境（如 Node.js < 17 或 IE/旧版 Safari），可考虑 JSON.parse(JSON.stringify(obj))（仅适用于纯 JSON 数据，会丢失函数、undefined、Date 对象等）或成熟库如 Lodash 的 _.cloneDeep()；
• 切勿用 Object.assign({}, obj) 或展开运算符替代深拷贝——它们本质相同，均为浅拷贝。

? 总结：展开运算符是高效便捷的浅拷贝工具，适用于扁平对象或明确知晓嵌套结构无需隔离的场景；一旦涉及多层嵌套或需状态解耦，务必选用 structuredClone() 或其他深拷贝方案，避免隐式引用带来的副作用。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript 展开运算符是浅拷贝吗？》文章吧，也可关注golang学习网公众号了解相关技术文章。