JS进行深拷贝操作

2022-11-30 0 330

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

数组的深拷贝

方法一: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);

 

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!cheeksyu@vip.qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有积分奖励和额外收入!
5.严禁将资源用于任何违法犯罪行为,不得违反国家法律,否则责任自负,一切法律责任与本站无关

源码下载

发表评论
暂无评论