javascript深浅拷贝是什么_如何正确复制对象?

12次阅读

浅拷贝仅复制第一层引用,Object.assign和展开运算符属此类,修改嵌套属性会影响原对象;深拷贝需递归处理所有层级,jsON方法有诸多限制,structuredClone是现代标准方案,支持多种内置类型但不支持函数、symbol等。

javascript深浅拷贝是什么_如何正确复制对象?

浅拷贝只复制第一层引用,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 会忽略 undefinedNULL 源对象,但不会报错
  • 不能拷贝不可枚举属性、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、函数、SymbolDate(转成字符串)、regexpMap/SetNaNInfinity
  • 遇到循环引用直接抛 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 —— 安全

  • 支持 DateRegExpMapSetArrayBufferTypedArrayBigIntundefined(在对象中)
  • 不支持函数、SymbolError 对象、dom 节点、window 等宿主对象
  • node.js 从 v17.0 开始支持,但需启用 --enable-structured-clone 标志;v18.13+ 默认启用
  • 遇到循环引用会抛 DataCloneError,比 JSON 方法更明确

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

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

立即学习Java免费学习笔记(深入)”;

关键点:

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

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

text=ZqhQzanResources