JavaScript深拷贝与浅拷贝区别及注意事项

JavaScript中的深拷贝与浅拷贝看似基础，实则暗藏诸多陷阱：浅拷贝（如Object.assign()、展开运算符）仅复制顶层属性，嵌套对象仍共享引用，极易引发意外副作用；而看似便捷的JSON.parse(JSON.stringify())深拷贝方案，却会 silently 丢失function、undefined、Symbol、BigInt，篡改Date/RegExp，抹除Map/Set，完全不适用于真实业务场景；现代structuredClone()虽大幅改善兼容性并支持循环引用和复杂内置类型，但仍对函数等关键类型束手无策；真正稳健的解决方案需结合WeakMap防循环、类型精准判别与特殊对象手动重建——但更值得反思的是：多数情况下，与其冒险深拷贝，不如借助Immer实现不可变更新，或从架构层面转向函数式数据流，既安全又高效。

浅拷贝只复制第一层，Object.assign() 和展开运算符都属此类

浅拷贝不会递归复制嵌套对象或数组，只是把顶层属性的值（对对象来说是引用）复制过去。修改副本里的嵌套结构，原对象也会跟着变。

常见写法包括：

• Object.assign({}, obj)
• {...obj}（仅适用于对象，不处理 Symbol 或不可枚举属性）
• Array.prototype.slice() 或 [...arr]（对数组有效，但内部对象仍是引用）

注意：Object.assign() 会忽略 null 和 undefined 源对象，且无法拷贝原型链上的属性；展开运算符不支持 Date、RegExp 等特殊对象，遇到就变成空对象。

深拷贝要避开循环引用和特殊类型，JSON.parse(JSON.stringify()) 最常用但有硬伤

这个组合看似简单，实则限制极多：它会丢掉 undefined、function、Symbol、BigInt，不能处理循环引用，还会把 Date 变成字符串、RegExp 变成空对象、Map/Set 直接消失。

示例：

const obj = { date: new Date(), reg: /abc/, fn: () => {}, map: new Map([['a', 1]]) };
console.log(JSON.parse(JSON.stringify(obj)));
// { date: "2024-01-01T00:00:00.000Z", reg: {}, fn: undefined, map: {} }

所以它只适合纯数据对象（POJO），且你明确知道结构里没有上述“非法”值。

需要真正可靠的深拷贝？用 structuredClone() 或手写递归函数

structuredClone() 是现代浏览器（Chrome 98+、Firefox 94+、Safari 16.4+）原生支持的方案，能正确处理 Date、RegExp、Map、Set、ArrayBuffer、TypedArray，也支持循环引用——但它仍不支持 function、undefined、Symbol 和 BigInt（会抛错）。

如果需兼容老环境或支持更多类型，就得手写递归深拷贝。关键点包括：

• 用 typeof 和 Array.isArray() 判断类型
• 用 WeakMap 记录已拷贝的对象，避免循环引用导致栈溢出
• 对 Date、RegExp、Map、Set 单独构造新实例
• 跳过 function 和 Symbol（或按需选择忽略/报错/序列化为占位符）

一个最小可用的递归实现骨架：

function deepClone(obj, seen = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') return obj;
  if (seen.has(obj)) return seen.get(obj);
  
  let cloned;
  if (obj instanceof Date) cloned = new Date(obj);
  else if (obj instanceof RegExp) cloned = new RegExp(obj);
  else if (obj instanceof Map) cloned = new Map([...obj].map(([k, v]) => [k, deepClone(v, seen)]));
  else if (obj instanceof Set) cloned = new Set([...obj].map(v => deepClone(v, seen)));
  else if (Array.isArray(obj)) cloned = obj.map(item => deepClone(item, seen));
  else {
    cloned = {};
    seen.set(obj, cloned);
    for (let key in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
        cloned[key] = deepClone(obj[key], seen);
      }
    }
  }
  return cloned;
}

复制时别忘了不可枚举属性、getter/setter 和原型链

Object.assign() 和展开运算符都只处理可枚举自有属性，Object.getOwnPropertyDescriptors() 才能拿到 get/set、enumerable、writable 等完整描述符。若需保留 getter，必须显式重建：

const obj = { get x() { return this._x; }, set x(v) { this._x = v; } };
const descriptors = Object.getOwnPropertyDescriptors(obj);
const cloned = Object.defineProperties({}, descriptors);

而原型链上的属性默认不会被任何拷贝方法继承——除非你手动用 Object.setPrototypeOf(cloned, Object.getPrototypeOf(obj)) 补上。这点在类实例深拷贝时特别容易漏掉。

实际项目中，优先判断是否真需要深拷贝：多数场景下，用 immer 做不可变更新，或直接重构为函数式数据流，比无脑深拷贝更安全、高效。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~