欢迎您光临自学哈网,只为分享网络知识教程,供大家学习参考!

「自学哈网」JS进行深拷贝操作

作者 : 自学哈 本文共1261个字,预计阅读时间需要4分钟 2023-08-4 共72人阅读
也想出现在这里? 联系我们

深拷贝就是指完全的拷贝一个对象,即使嵌套了对象,两者也相互分离,修改一个对象的属性,也不会影响另一个。

数组的深拷贝

方法一:JSON.stringify()不仅可拷贝数组还能拷贝对象(但不能拷贝函数,也不能解决循环引用问题)

var arr = ['old', 1, true, ['old1', 'old2'], { 
   old: 1}]
var new_arr = JSON.parse(JSON.stringify(arr))
console.log(new_arr);

方法二:递归。下面是深拷贝一个通用方法,实现思路:拷贝的时候判断属性值的类型,如果是对象,继续递归调用深拷贝函数

var deepCopy = function(target) { 

// 只拷贝对象
if (typeof target !== 'object') return target;
// 根据obj的类型判断是新建一个数组还是一个对象
var result = Array.isArray(obj) ? [] : { 
};
for (var key in target) { 

// 遍历obj,并且判断是obj的属性才拷贝(不能拷贝原型对象的属性)
if (target.hasOwnProperty(key)) { 

// 判断属性值的类型,如果是对象递归调用深拷贝
result[key] = typeof target[key] === 'object' ? deepCopy(target[key]) : target[key];
}
}
return result;
}

其中上述方法一、方法二都解决不了循环引用的问题。

方法三,结合map(将方法二的递归改造,解决循环引用问题):

var deepCopy = function (target, map = new Map()) { 

// 只拷贝对象
if (typeof target !== "object") return target;
// 克隆数据之前,先判断之前是否有克隆过(解决循环引用的问题)
let cache = map.get(target);
if (cache) { 

return cache;
}
// 根据obj的类型判断是新建一个数组还是一个对象
var result = Array.isArray(target) ? [] : { 
};
// 将新的结果存到容器中
map.set(target, result);
for (var key in target) { 

// 遍历obj,并且判断是obj的属性才拷贝(不能拷贝原型对象的属性)
if (target.hasOwnProperty(key)) { 

// 判断属性值的类型,如果是对象递归调用深拷贝
result[key] =
typeof target[key] === "object"
? deepCopy(target[key], map)
: target[key];
}
}
return result;
};
// 测试代码
let obj = { 
 a: 1, b: [6, 8], c: { 
 e: 3 } };
obj.b.push(obj.c);
obj.c.h = obj.b;
let obj1 = deepCopy(obj);
console.log(obj);
console.log(obj1);

 

本站声明:
本站所有资源来源于网络,分享目的仅供大家学习和交流!如若本站内容侵犯了原著者的合法权益,可联系邮箱976157886@qq.com进行删除。
自学哈专注于免费提供最新的分享知识、网络教程、网络技术的资源分享平台,好资源不私藏,大家一起分享!

自学哈网 » 「自学哈网」JS进行深拷贝操作
也想出现在这里? 联系我们
© 2022 Theme by - 自学哈网 & WordPress Theme. All rights reserved 浙ICP备2022016594号