深拷贝需创建完全独立副本,避免引用干扰;JSON法简洁但丢函数/循环引用;structuredClone是现代推荐方案;手写递归可定制且兼容旧环境;Lodash cloneDeep最健壮但体积大。

JavaScript中深拷贝的核心是创建一个全新对象,使其与原对象完全独立,修改副本不会影响原始数据。直接赋值或浅拷贝(如Object.assign()、展开运算符{...obj})只复制引用,导致修改嵌套属性时互相干扰。
使用JSON序列化与反序列化(简单场景适用)
这是最简方式,适合纯数据对象(不含函数、undefined、Symbol、Date、RegExp、Map、Set、循环引用等):
const deepCopy = JSON.parse(JSON.stringify(originalObj));- 优点:一行代码,无依赖,性能尚可
- 缺点:会丢失函数、undefined、NaN、Infinity;Date变成字符串;正则变空对象;遇到循环引用直接报错
使用structuredClone(现代浏览器推荐)
ES2022引入的原生API,支持大多数内置类型(包括Map、Set、Date、RegExp、ArrayBuffer等),且能处理循环引用:
const deepCopy = structuredClone(originalObj);- 目前主流浏览器(Chrome 98+、Firefox 94+、Edge 98+、Safari 15.4+)已支持
- 注意:Node.js 17.0+需启用
--experimental-structured-cloning标志;18.11+默认启用
手写递归深拷贝(兼容旧环境或需定制逻辑)
适用于需要兼容IE或控制拷贝行为(如忽略某些字段、处理特殊类型)的场景:
立即学习“Java免费学习笔记(深入)”;
- 判断类型:用
Object.prototype.toString.call(val)区分普通对象、数组、Date、RegExp等 - 缓存已拷贝对象:防止循环引用导致栈溢出(用WeakMap记录源对象→副本映射)
- 对数组、普通对象递归遍历属性;对Date、RegExp等构造新实例;对基本类型直接返回
- 示例关键逻辑:
if (seen.has(obj)) return seen.get(obj);
const copy = Array.isArray(obj) ? [] : {};
seen.set(obj, copy);
for (let key in obj) { if (obj.hasOwnProperty(key)) { copy[key] = deepClone(obj[key], seen); } }
借助第三方库(开发效率优先)
Lodash的_.cloneDeep()经过大量边界测试,支持几乎所有JS类型和循环引用,适合生产环境快速落地:
import { cloneDeep } from 'lodash-es';
const deepCopy = cloneDeep(originalObj);- 体积较大(全量lodash约24KB gzip),建议按需引入
lodash-es或CDN按需加载 - 比手写更健壮,尤其在处理稀疏数组、原型链、不可枚举属性等细节上










