别再只用JSON.stringify做深拷贝了,这些坑你要知道
在JavaScript里,我们经常需要复制一个对象。很多人喜欢用JSON.parse(JSON.stringify(obj))这种方法,因为它写起来简单。但你可能不知道,这种做法其实有不少问题,处理不好会导致程序出错或者数据丢失。
这篇文章会告诉你为什么不要总用这种方法,并介绍几种更好、更安全的深拷贝方式。
JSON.stringify 做深拷贝的主要问题
看起来一行代码就能搞定深拷贝,但实际上它有很多限制。下面是一些常见的问题:
遇到循环引用会报错
如果一个对象内部自己引用自己,用这种方法就会出错。
let obj = { name: "测试对象" };
obj.self = obj; // 自己引用自己
// 这行会报错
let copy = JSON.parse(JSON.stringify(obj));运行时会直接抛出类型错误,程序就无法继续执行了。
很多数据类型无法正确处理
有些类型的数据会在转换过程中丢失或者改变:
let original = {
func: function() { console.log('我是函数') },
symbol: Symbol('符号'),
undefinedVal: undefined,
date: new Date(),
pattern: /正则表达式/g,
nan: NaN,
infinity: Infinity
};
let copy = JSON.parse(JSON.stringify(original));
console.log(copy);
// 输出结果:
// {
// date: "2025-04-20T08:00:00.000Z", // 日期变成字符串
// pattern: {}, // 正则变成空对象
// nan: null, // NaN变成null
// infinity: null // Infinity也变成null
// // 函数、Symbol和undefined全部不见了
// }从输出可以看出,很多类型的数据都没有被正确保留。
会丢失原型链信息
如果你复制的是类的实例,复制后会变成普通对象,失去原来的方法:
class Person {
constructor(name) {
this.name = name;
}
sayHello() {
return `你好,${this.name}`;
}
}
let original = new Person('张三');
let copy = JSON.parse(JSON.stringify(original));
console.log(original.sayHello()); // 正常输出
console.log(copy.sayHello); // undefined,方法不见了
console.log(copy instanceof Person); // false,不再是Person的实例无法处理Map、Set等集合类型
let original = {
set: new Set([1, 2, 3]),
map: new Map([['key', 'value']]),
};
let copy = JSON.parse(JSON.stringify(original));
console.log(copy); // { set: {}, map: {} },内容全部丢失更好的深拷贝方法
既然JSON方法有这么多问题,那我们应该用什么方法呢?
使用现代浏览器自带的structuredClone
现在大多数浏览器都支持这个api:
let copy = structuredClone(original);它的优点很明显:
支持循环引用
能正确处理Date、RegExp、Map、Set等类型
性能比JSON方法更好
但也要注意,它还是不能复制函数和dom节点,也不会保留原型链。
手动实现深拷贝函数
如果需要更精细的控制,可以自己写一个深拷贝函数:
function deepClone(obj, hash = new WeakMap()) {
if (obj === null || typeof obj !== 'object') {
return obj;
}
if (hash.has(obj)) {
return hash.get(obj);
}
let result = Array.isArray(obj) ? [] : {};
hash.set(obj, result);
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
result[key] = deepClone(obj[key], hash);
}
}
return result;
}使用现成的工具库
像Lodash这样的库提供了可靠的深拷贝方法:
// 需要先安装lodash
let copy = _.cloneDeep(original);总结
虽然JSON.parse(JSON.stringify(obj))写起来很方便,但它的问题实在太多,不适合在正式项目中使用。根据你的具体需求,可以选择:
简单场景用structuredClone
复杂需求用自己实现的深拷贝函数
项目中有现成工具库的话直接用库里的方法
选择合适的深拷贝方式,可以避免很多潜在的问题,让代码更加可靠。希望这些信息对你有帮助。
本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!