JavaScript中的深拷贝远非一行JSON代码就能完美解决,它关乎数据完整性、内存独立性与环境兼容性的精细权衡:JSON方法虽简洁却会丢失函数、undefined、Symbol、Date、RegExp等类型并崩溃于循环引用;现代推荐的structuredClone()能优雅处理大多数内置对象和循环引用,却无法克隆函数与DOM节点;而自定义递归方案借助WeakMap可灵活支持全类型(包括函数)和循环引用,但实现复杂、易出错;最终选择需综合数据结构复杂度、运行环境(如是否支持structuredClone)、性能要求及是否引入Lodash等成熟库——真正可靠的深拷贝,是根据场景精准匹配工具链的工程实践,而非一招鲜的银弹。
JSON.parse(JSON.stringify(obj)) 不能深拷贝一切,它会丢失或转换函数、undefined、Symbol、RegExp、Date等类型,且不支持循环引用;2. 实现真正深拷贝的推荐方法是使用 structuredClone(),它能处理大多数内置对象和循环引用,但不支持函数和DOM节点;3. 当需更高灵活性或兼容旧环境时,可自定义递归深拷贝函数,通过 WeakMap 处理循环引用,并手动处理 Date、RegExp 等特殊类型;4. 深拷贝与浅拷贝的本质区别在于是否递归复制所有嵌套引用,深拷贝确保新旧对象完全独立;5. 选择方法时应权衡数据复杂度、环境兼容性和性能需求,优先使用 structuredClone(),其次考虑 JSON 方法或自定义函数,必要时引入 Lodash 等库的 cloneDeep 方法以获得最佳兼容性和健壮性。

在JavaScript里,深拷贝一个对象意味着你需要创建一个全新的对象,它不仅复制了原始对象的所有属性值,更重要的是,如果这些属性值本身是引用类型(比如另一个对象或数组),深拷贝会递归地复制它们,确保新旧对象之间没有任何共享的引用。这样一来,你修改新对象的任何部分,都不会影响到原始对象。这与浅拷贝形成鲜明对比,浅拷贝仅仅复制顶层属性,嵌套的引用类型依然指向同一个内存地址。
解决方案
要实现一个可靠的深拷贝,根据你的具体场景和目标环境,有几种主流且实用的方法。
一种是利用 JSON 对象的序列化和反序列化能力。这种方式简洁明了,但有其局限性:
function deepCloneByJson(obj) {
try {
return JSON.parse(JSON.stringify(obj));
} catch (e) {
console.error("JSON深拷贝失败,可能存在不可序列化的数据类型或循环引用:", e);
// 根据实际情况,这里可以返回原始对象或抛出错误
return obj;
}
}
// 示例
const originalObj = {
a: 1,
b: { c: 2 },
d: [3, { e: 4 }],
f: new Date(), // 会被转换为字符串
g: undefined, // 会丢失
h: function() {}, // 会丢失
i: Symbol('test') // 会丢失
};
const clonedObj = deepCloneByJson(originalObj);
console.log(clonedObj);
// { a: 1, b: { c: 2 }, d: [ 3, { e: 4 } ], f: '2023-10-27T08:00:00.000Z' }
// 可以看到f变成了字符串,g、h、i都丢失了另一种,也是现代浏览器和Node.js环境中更推荐的方法,是使用 structuredClone() API。它设计之初就是为了解决复杂数据类型的深拷贝问题,并且能很好地处理循环引用:
function deepCloneStructured(obj) {
if (typeof structuredClone === 'function') {
try {
return structuredClone(obj);
} catch (e) {
console.error("structuredClone深拷贝失败,可能存在不可克隆的数据类型(如函数、DOM节点等):", e);
return obj; // 失败时返回原始对象
}
} else {
// 兼容性处理,如果不支持structuredClone,退而求其次使用JSON方法
console.warn("当前环境不支持structuredClone,尝试使用JSON方法进行深拷贝,但可能存在限制。");
return deepCloneByJson(obj);
}
}
// 示例
const originalComplexObj = {
name: 'Test',
details: {
id: 123,
timestamp: new Date(),
regex: /abc/g
},
list: [1, 2, { nested: 'item' }],
func: () => console.log('hello'),
circular: null
};
originalComplexObj.circular = originalComplexObj; // 制造一个循环引用
const clonedComplexObj = deepCloneStructured(originalComplexObj);
console.log(clonedComplexObj);
// 可以看到timestamp和regex都被正确克隆,且func会被忽略(因为不可克隆)
// 循环引用也会被正确处理JSON.parse(JSON.stringify(obj)) 真的能深拷贝一切吗?
说实话,不能。虽然它在很多场景下非常方便,尤其是处理那些只包含数字、字符串、布尔值、null、普通对象和数组的“纯粹”JSON数据时,简直是神器。一行代码搞定,性能也不错。但一旦你的对象里开始出现一些“不那么JSON”的东西,比如 Date 对象、RegExp 对象、undefined、NaN、Infinity、函数、Symbol、Map、Set,甚至是 DOM 节点或者复杂的类实例,它就力不从心了。
举个例子,Date 对象会被转换成ISO格式的字符串,而不是一个新的 Date 实例。undefined、函数和 Symbol 类型的属性会直接被忽略掉。NaN 和 Infinity 会变成 null。更要命的是,如果你的对象存在循环引用(就是对象A引用了对象B,对象B又引用了对象A),JSON.stringify() 会直接抛出错误,导致整个拷贝过程失败。这就像你试图用一个筛子去装水,总有些东西会漏掉或者变形。所以,如果对数据类型有严格要求,或者对象结构比较复杂,就得小心使用这种方法了。
面对复杂数据类型,如何实现真正的深拷贝?
当 JSON.parse(JSON.stringify()) 的局限性变得无法接受时,我们通常会转向更强大的工具。在现代JavaScript世界里,structuredClone() API无疑是首选。它被设计来处理那些通过 postMessage 传递的数据类型,这意味着它能深拷贝大多数内置对象类型,包括 Date、RegExp、Map、Set、ArrayBuffer、TypedArray、ImageData、Blob、File 等,而且最关键的是,它能优雅地处理循环引用,不会像 JSON.stringify 那样直接报错。这让它在处理复杂数据结构时显得非常“省心”。
然而,structuredClone() 也有它的“脾气”。它不能克隆函数(因为函数是不可结构化克隆的),也不能克隆 DOM 节点、Error 对象以及一些特殊的主机对象。对于这些不可克隆的类型,它会直接抛出 DataCloneError。
那么,如果连 structuredClone() 都无法满足,比如你需要克隆一个包含函数的特定类实例,或者你的运行环境不支持 structuredClone() 怎么办?这时候,自定义递归深拷贝函数就派上用场了。虽然实现起来会复杂一些,尤其要考虑周全各种数据类型和循环引用,但它提供了最大的灵活性。
一个基本的递归实现思路是:
- 判断当前值是否为原始类型或
null,是则直接返回。 - 判断是否为对象或数组。
- 处理循环引用:维护一个
Map 或 WeakMap 来存储已拷贝过的对象和它们对应的克隆,避免无限递归。 - 根据是对象还是数组,创建新的空对象或空数组。
- 遍历原始对象的属性,对每个属性值递归调用深拷贝函数。
function customDeepClone(obj, hash = new WeakMap()) {
// 处理原始类型和null
if (obj === null || typeof obj !== 'object') {
return obj;
}
// 处理日期对象
if (obj instanceof Date) {
return new Date(obj);
}
// 处理正则表达式
if (obj instanceof RegExp) {
return new RegExp(obj.source, obj.flags);
}
// 处理循环引用
if (hash.has(obj)) {
return hash.get(obj);
}
// 创建新对象或新数组
const clone = Array.isArray(obj) ? [] : {};
hash.set(obj, clone); // 在递归之前将克隆对象放入hash
// 递归拷贝属性
for (let key in obj) {
// 确保只拷贝对象自身的属性,不包括原型链上的
if (Object.prototype.hasOwnProperty.call(obj, key)) {
clone[key] = customDeepClone(obj[key], hash);
}
}
return clone;
}
// 示例:包含函数、循环引用、日期和正则
const originalCustom = {
a: 1,
b: { c: 2 },
d: [3, { e: 4 }],
f: new Date(),
g: /test/gi,
h: function() { console.log('hello'); },
i: Symbol('id'), // Symbol类型会直接被拷贝,但其值是唯一的
j: null
};
originalCustom.j = originalCustom; // 制造循环引用
const clonedCustom = customDeepClone(originalCustom);
console.log(clonedCustom);
// 可以看到日期和正则被正确克隆为新实例,函数也被拷贝了(虽然通常不推荐拷贝函数)
// 循环引用也被处理了这种自定义方法提供了最大的控制力,但实现起来也更考验功力,尤其是要确保没有遗漏各种边缘情况和特殊类型。在实际项目中,如果不是特别定制化的需求,我个人更倾向于优先考虑 structuredClone()。
深拷贝与浅拷贝的本质区别是什么?
深拷贝和浅拷贝,这两个概念是理解JavaScript中对象复制的关键。它们的本质区别在于:是否彻底断开新旧对象在内存中的所有引用关系。
浅拷贝,顾名思义,它只会复制对象或数组的顶层属性。这意味着,如果原始对象中的某个属性值是基本类型(如数字、字符串、布尔值),那么新对象会得到一个独立的副本。但如果属性值是引用类型(比如另一个对象或数组),那么新对象复制的仅仅是这个引用本身的地址,而不是引用指向的实际内容。结果就是,新旧对象会共享这个嵌套的引用类型。你修改新对象中这个嵌套引用类型的属性,原始对象也会受到影响,反之亦然。这就像你复制了一本书的目录,但书页本身还是同一本。
常见的浅拷贝方式有:
- 展开运算符 (
...):用于对象或数组。const obj1 = { a: 1, b: { c: 2 } };
const shallowCopy1 = { ...obj1 };
shallowCopy1.b.c = 3; // obj1.b.c 也会变成 3 Object.assign():用于对象合并。const obj2 = { a: 1, b: { c: 2 } };
const shallowCopy2 = Object.assign({}, obj2);
shallowCopy2.b.c = 4; // obj2.b.c 也会变成 4Array.prototype.slice() 或 Array.from():用于数组。const arr1 = [1, { a: 2 }];
const shallowCopyArr1 = arr1.slice();
shallowCopyArr1[1].a = 3; // arr1[1].a 也会变成 3
而深拷贝则完全不同。它会递归地复制原始对象的所有层级,包括所有嵌套的引用类型。每当遇到一个引用类型,它都会创建一个全新的实例,并把原始实例的内容复制过去。这样一来,新对象和原始对象在内存中是完全独立的,它们之间没有任何共享的引用。你对新对象的任何修改,都不会对原始对象产生副作用,反之亦然。这就像你把一本书的每一页都复印了一遍,现在你有了两本完全独立但内容相同的书。这种彻底的独立性,正是深拷贝的价值所在。
选择深拷贝方法时,性能和兼容性如何权衡?
在选择深拷贝方法时,我通常会先问自己几个问题:
- 数据复杂吗? 有没有
Date、RegExp、Map、Set、循环引用,或者更奇葩的比如 Blob、File? - 目标环境是什么? 是现代浏览器、Node.js,还是需要兼容老旧IE浏览器?
- 性能要求高吗? 是拷贝一个小型配置对象,还是一个包含成千上万个嵌套对象的巨型数据结构?
基于这些考量,我个人会这样权衡:
总结一下,我的建议是:优先考虑 structuredClone(),它兼顾了功能和性能,是现代Web开发的理想选择。如果环境不支持或有特定不可克隆类型的需求,再考虑自定义递归函数。而 JSON.parse(JSON.stringify()) 更多是作为快速、简单的“万金油”,但要牢记它的局限性。
以上就是本文的全部内容了,是否有顺利帮助你解决问题?若是能给你带来学习上的帮助,请大家多多支持golang学习网!更多关于文章的相关知识,也可关注golang学习网公众号。