JavaScript深拷贝是创建内存独立的新对象,修改互不影响;常用方法包括JSON.parse(JSON.stringify())(限纯数据)、structuredClone()(现代推荐)、手写递归(可控性强)、lodash.cloneDeep()(生产首选)。

JavaScript深拷贝是指创建一个新对象或数组,其内容与原对象完全相同,且新对象与原对象在内存中完全独立——修改新对象不会影响原对象,反之亦然。这与浅拷贝(只复制第一层引用)有本质区别,尤其在处理嵌套对象、数组、日期、正则等复杂类型时尤为关键。
为什么需要深拷贝
JavaScript中对象和数组是引用类型。直接赋值只是复制了引用地址,两个变量指向同一块内存:
let a = { name: "Alice", info: { age: 25 } };
let b = a; // 浅赋值
b.name = "Bob";
b.info.age = 30;
console.log(a.info.age); // 输出 30 —— a 被意外修改!
深拷贝能切断这种引用关联,确保数据隔离。
立即学习“Java免费学习笔记(深入)”;
常用深拷贝方法及适用场景
1. JSON.parse(JSON.stringify()) —— 简单快捷但有局限
适合纯数据对象(仅含字符串、数字、布尔、null、数组、普通对象):
- ✅ 优点:一行代码,无依赖,性能尚可
- ❌ 缺点:丢失函数、undefined、Symbol、Date、RegExp、Map、Set、NaN、Infinity;会忽略原型链和循环引用;Date 变成字符串
const deepCopy = obj => JSON.parse(JSON.stringify(obj));
2. structuredClone() —— 现代浏览器推荐方案
原生 API,支持更多类型(Date、RegExp、Map、Set、ArrayBuffer 等),且能处理循环引用(部分环境):
- ✅ 优点:标准、安全、简洁;支持大多数内置类型
- ❌ 缺点:Node.js 17+ / Chrome 98+ 才支持;不支持函数、undefined、Symbol、Promise
const copy = structuredClone(originalObj);
3. 手写递归深拷贝 —— 完全可控,适合学习和定制
核心思路:判断类型 → 分类处理 → 递归复制子属性:
- 基础类型(string/number/boolean/null/undefined/Symbol)直接返回
- Date、RegExp、Array、Object 等构造出新实例,再遍历属性递归拷贝
- 需用 WeakMap 记录已拷贝对象,避免循环引用导致栈溢出
function deepClone(obj, hash = new WeakMap()) {
if (obj === null || typeof obj !== 'object') return obj;
if (hash.has(obj)) return hash.get(obj);
const cloned = Array.isArray(obj) ? [] : {};
hash.set(obj, cloned);
for (let key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
cloned[key] = deepClone(obj[key], hash);
}
}
return cloned;
}
第三方库方案(如 lodash)
lodash 的 _.cloneDeep() 经过大量测试,覆盖边缘情况(函数、原型、循环引用、特殊对象等),适合生产环境:
- ✅ 稳定可靠,兼容性好,文档完善
- ❌ 增加包体积;若项目已用 Lodash,复用很自然;否则为深拷贝单独引入略重
import { cloneDeep } from 'lodash-es';
const copy = cloneDeep(original);
选择建议
日常开发可按优先级选择:
- 目标环境支持且数据不含函数/Symbol → 用
structuredClone() - 需兼容老浏览器或要精确控制逻辑 → 手写递归(带 WeakMap)
- 项目已引入 Lodash → 直接用
_.cloneDeep() - 仅简单扁平数据 →
JSON.parse(JSON.stringify())快速应急
注意:深拷贝有性能开销,避免在高频循环中滥用;对大型对象,考虑是否真需要深拷贝,或改用不可变更新策略(如 Immer)。











