JavaScript深浅拷贝与Object.assign详解

本文深入解析了JavaScript中深浅拷贝的核心区别与实用实现方案：Object.assign和展开运算符等仅执行浅拷贝，只复制顶层属性，对嵌套对象仍共享引用，极易引发意外数据污染；而深拷贝需递归处理所有层级，推荐优先使用现代浏览器原生支持的structuredClone（安全、全面、支持循环引用），JSON序列化虽简便但存在诸多类型限制，手写递归函数则兼顾兼容性与可控性——掌握“是否递归处理引用类型”这一本质，就能根据场景精准选择高效又可靠的拷贝策略。

Object.assign 是浅拷贝，不是深拷贝。 它只复制对象第一层属性的值，遇到嵌套对象或数组时，复制的是引用地址，原对象和新对象仍共享同一份深层数据。

浅拷贝的实现方式

浅拷贝只复制对象顶层属性，对基本类型（string、number、boolean 等）是值拷贝；对引用类型（Object、Array、Date 等）是引用拷贝，即新旧对象指向同一内存地址。

• Object.assign({}, obj)：最常用，但仅限一层
• 展开运算符 {...obj}：语法简洁，效果同 Object.assign
• Array.prototype.slice() / concat()：适用于数组浅拷贝
• Array.from(arr)：也可用于数组浅拷贝

深拷贝的常见实现方法

深拷贝会递归复制所有层级，确保新对象与原对象完全独立，修改互不影响。

• JSON.parse(JSON.stringify(obj))：简单快捷，但有严重限制——无法处理函数、undefined、Symbol、Date、RegExp、Map、Set、循环引用等
• 结构化克隆（structuredClone）：现代浏览器支持（Chrome 98+、Firefox 94+），能正确处理 Date、RegExp、Map、Set、Blob 等，且支持循环引用，推荐优先使用：const deepCopy = structuredClone(obj);
• 手写递归深拷贝函数：可定制逻辑，兼容老环境，需判断类型、处理 null、数组、普通对象、循环引用等

为什么 Object.assign 不是深拷贝？看个例子

比如：

const obj = { a: 1, b: { c: 2 } };
const copy = Object.assign({}, obj);
copy.b.c = 3;
console.log(obj.b.c); // 输出 3 —— 原对象被意外修改了

因为 b 是对象，Object.assign 只复制了它的引用，copy.b 和 obj.b 指向同一个对象。

怎么选？简单场景 vs 安全可靠

• 只要拷贝一层，用 {...obj} 或 Object.assign 就够了，轻量高效
• 需要完整隔离嵌套结构，优先用 structuredClone
• 要兼容老浏览器且要求不高，可用 JSON 方案（注意数据类型限制）
• 对兼容性、性能、类型支持都有严格要求，建议封装一个带循环引用检测的手写深拷贝函数

基本上就这些。深浅拷贝本质是“是否递归处理引用类型”，抓住这点，选哪种方式就很清楚了。

本篇关于《JavaScript深浅拷贝与Object.assign详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！