JavaScript对象复制方法及深浅拷贝区别

本文深入剖析了JavaScript中浅拷贝与深拷贝的本质区别：浅拷贝（如Object.assign、展开运算符）仅复制对象第一层属性，嵌套对象仍共享引用，极易引发意外的数据污染；而所谓“万能”的JSON方法实则漏洞百出，会 silently 丢失函数、Symbol、Map、Date等关键类型并崩溃于循环引用；真正可靠且现代的解决方案是structuredClone——它原生支持多种复杂内置类型，错误提示更明确，已成为浏览器和新版Node.js的事实标准；同时提醒开发者，手写深拷贝需严谨处理类型识别、循环引用和边界场景，生产环境务必优先选用标准化方案或成熟工具库，而非临时拼凑。

浅拷贝只复制第一层引用，Object.assign 和展开运算符都属于这一类

当你用 Object.assign({}, obj) 或 {...obj} 复制一个含嵌套对象的值时，顶层属性会被复制，但内部的 obj.nested 仍是原对象的引用。修改副本的嵌套属性，原对象同步变化。

常见错误现象：

const a = { x: 1, y: { z: 2 } };
const b = { ...a };
b.y.z = 99;
console.log(a.y.z); // 输出 99 —— 原对象被意外修改

• 适用场景：仅需隔离顶层字段（如配置合并、props 透传）
• 注意 Object.assign 会忽略 undefined 和 null 源对象，但不会报错
• 不能拷贝不可枚举属性、Symbol 键、getter/setter

深拷贝要递归复制所有层级，JSON.parse(JSON.stringify()) 最快但限制多

这是最常被误用的“深拷贝”方案。它确实能处理多层嵌套，但会丢数据：

const obj = {
  a: 1,
  b: undefined,
  c: function() {},
  d: Symbol('s'),
  e: new Date(),
  f: /test/,
  g: new Map([[1, 'one']])
};
console.log(JSON.parse(JSON.stringify(obj))); // { a: 1, e: "2023-01-01T00:00:00.000Z" } —— 其余全丢失

• 会跳过 undefined、函数、Symbol、Date（转成字符串）、RegExp、Map/Set、NaN、Infinity
• 遇到循环引用直接抛 TypeError: Converting circular structure to JSON
• 性能尚可，但对大对象或高频调用仍不推荐

真正可靠的深拷贝得用结构化克隆或专用库

现代浏览器中，structuredClone 是目前最接近“开箱即用”的标准方案：

const original = { x: 1, y: { z: 2 }, date: new Date(), map: new Map([[1, 'a']]) };
const clone = structuredClone(original);
clone.y.z = 99;
console.log(original.y.z); // 2 —— 安全

• 支持 Date、RegExp、Map、Set、ArrayBuffer、TypedArray、BigInt、undefined（在对象中）
• 不支持函数、Symbol、Error 对象、DOM 节点、Window 等宿主对象
• Node.js 从 v17.0 开始支持，但需启用 --enable-structured-clone 标志；v18.13+ 默认启用
• 遇到循环引用会抛 DataCloneError，比 JSON 方法更明确

手写深拷贝要注意类型判断和循环引用检测

如果必须兼容老环境或需要定制行为（比如跳过某些字段、转换日期格式），就得自己实现。核心是两件事：准确识别数据类型、记录已遍历对象防止死循环。

关键点：

• 用 Object.prototype.toString.call(x) 判断类型，比 typeof 更可靠（尤其区分 Array、Map、Date 等）
• 用 WeakMap 缓存源对象 → 副本映射，每次进入对象前先查缓存
• 对 Map 和 Set 需单独处理键值对，不能只遍历 for...in
• 避免递归爆栈：超深层对象建议加深度限制或改用栈模拟递归

真正难的不是“怎么写”，而是“哪些边界情况你没考虑到”——比如 constructor 不同的空对象、带 __proto__ 的对象、冻结对象、稀疏数组。生产环境优先用 structuredClone 或成熟库（如 Lodash 的 cloneDeep），而不是临时拼一个。

到这里，我们也就讲完了《JavaScript对象复制方法及深浅拷贝区别》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！