如何实现JavaScript中的深拷贝与浅拷贝技巧？

本文共计1051个文字，预计阅读时间需要5分钟。

JavaScript中的浅拷贝（shallow copy）仅复制对象或数组的顶层属性，对于嵌套的引用类型（如对象、数组）仅复制指针，新旧对象共享同一块内存。常见错误包括使用Object.assign()或展开运算符[...arr]，这只能完全隔离数据，修改深层属性时，原始数据也会被意外改变。

适用场景：只需隔离顶层字段，且确定内部结构不会被后续修改；或作为性能敏感场景下的临时方案。

• Object.assign({}, obj) 对对象有效，但不处理 null、undefined 或原型链
• [...arr] 或 Array.from(arr) 适合一维数组，对含对象的数组无效
• structuredClone() 是现代浏览器推荐方式，但目前不支持函数、undefined、Symbol 和循环引用

深拷贝必须递归或序列化处理嵌套结构

真正意义上的深拷贝需确保所有层级的引用类型都生成独立副本。没有银弹方案，选择取决于环境限制和数据特征。

最稳妥的手写递归实现要处理：null、日期、正则、数组、普通对象、Map/Set 等类型，还要避免循环引用导致栈溢出。但多数项目中，更倾向用成熟方案降低维护成本。

立即学习“Java免费学习笔记（深入）”；

• JSON 序列化（JSON.parse(JSON.stringify(obj))）最常用，但会丢弃 function、undefined、Symbol、Date、RegExp、NaN，且无法处理循环引用
• structuredClone() 是浏览器原生 API，支持 Date、Map、Set、ArrayBuffer 等，但 Node.js 17+ 才支持，且仍不支持函数
• Lodash 的 _.cloneDeep() 兼容性最好，能处理函数（作为空对象）、循环引用、稀疏数组等边界情况，但引入依赖需权衡

遇到循环引用时，JSON 和 structuredClone 都会报错

当对象存在自引用（比如 a.b = a）或相互引用（a.b = b; b.a = a），JSON.stringify() 抛出 TypeError: Converting circular structure to JSON，structuredClone() 则抛出 DATA_CLONE_ERR。

此时必须用带缓存的递归方案：用 WeakMap 记录已拷贝的对象，遇到重复引用直接返回已有副本。

function deepClone(obj, map = new WeakMap()) { if (obj === null || typeof obj !== 'object') return obj; if (map.has(obj)) return map.get(obj); const cloned = Array.isArray(obj) ? [] : {}; map.set(obj, cloned); for (const key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { cloned[key] = deepClone(obj[key], map); } } return cloned; }

Node.js 环境下注意 structuredClone 的可用性与替代方案

Node.js 17.0+ 默认启用 structuredClone()，但低于该版本需降级处理。不能简单 fallback 到 JSON 方法——它会静默丢失数据，而应明确判断不可序列化字段并报错，或引入 node:util 的 inspect() + 自定义解析逻辑。

如果项目已使用 fast-copy 或 klona 这类轻量库，要注意它们对 Map/Set 的支持程度，以及是否默认处理 prototype 属性。

• klona 极快且无依赖，但不处理 Map、Set、Date
• fast-copy 支持更多类型，但比 structuredClone() 慢约 2–3 倍
• 自己实现时，别忘了检查 obj.constructor === Object，否则 new obj.constructor() 可能误调用自定义类构造器

实际项目里，90% 的深拷贝需求用 structuredClone() 就够了；剩下那 10%，往往是因为你正在操作一个带方法或 Symbol 键的配置对象——这时候就得承认：拷贝不是目的，设计才是。