通八洲科技

如何实现Javascript的深拷贝与浅拷贝_在Javascript中处理对象复制时应注意什么?

日期:2026-01-01 00:00 / 作者:紅蓮之龍
浅拷贝只复制第一层,Object.assign()和展开运算符属此类,不递归处理嵌套对象;深拷贝需避开循环引用和特殊类型,JSON.parse(JSON.stringify())有诸多限制,structuredClone()更可靠但不支持function等,手写递归可定制化处理。

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

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

常见写法包括:

注意:Object.assign() 会忽略 nullundefined 源对象,且无法拷贝原型链上的属性;展开运算符不支持 DateRegExp 等特殊对象,遇到就变成空对象。

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

这个组合看似简单,实则限制极多:它会丢掉 undefinedfunctionSymbolBigInt,不能处理循环引用,还会把 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: "2025-01-01T00:00:00.000Z", reg: {}, fn: undefined, map: {} }

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

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

structuredClone() 是现代浏览器(Chrome 98+、Firefox 94+、Safari 16.4+)原生支持的方案,能正确处理 DateRegExpMapSetArrayBufferTypedArray,也支持循环引用——但它仍不支持 functionundefinedSymbolBigInt(会抛错)。

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

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

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/setenumerablewritable 等完整描述符。若需保留 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 做不可变更新,或直接重构为函数式数据流,比无脑深拷贝更安全、高效。