深浅拷贝
原创
最常用的深拷贝方法
1.Object.assign
此方法是es6新推出来的方法，目的是将所有可枚举属性的值从一个或多个源对象分配到目标对象
Object.assign(目标对象， 源对象)该方法参数可以有一个，或者是对个
- 参数为一个时且为一个对象时，该方法会返回该对象
- 参数为多个时，且参数都为对象，该方法会将源对象上的属性添加（重复的属性后面的对象会覆盖前面对象的属性）到目标对象。不会改变源对象。
//注意目标对象不能为null或undefined
Object.assign(null); // TypeError: Cannot convert undefined or null to object
Object.assign(undefined); // TypeError: Cannot convert undefined or null to object
//当参数为一个且不为对象时，会将值转换为对象返回
Object.assign(3); // Number {3}
typeof Object.assign(3); // "object"
//当参数不止一个时，null 和 undefined 不放第一个，即不为目标对象时，会跳过 null 和 undefined ，不报错
Object.assign(1,undefined); // Number {1}
Object.assign({a: 1},null); // {a: 1}
Object.assign(undefined,{a: 1}); // TypeError: Cannot convert undefined or null to object
//当为数组时，会将数组先转换为对象，将下标转换为键，然后进行对象合并
Object.assign([2,3], [5]); // [5,3]注意：assign 的属性拷贝是浅拷贝（踩过的深坑）
2.无意中看到一种方法，效果与assign一样，只能实现一级拷贝
let obj1 = {name: 'dandan', love: {car: '宝马'， food：'西瓜'}}
let obj2 = {...obj1}
obj1 == obj2 //false
obj1.name = 'fufu'
console.log(obj1) // {name: 'fufu', love: {car: '宝马'， food：'西瓜'}}
console.log(obj2)// {name: 'dandan', love: {car: '宝马'， food：'西瓜'}}
obj1.love.food = '草莓'
console.log(obj1)// {name: 'fufu', love: {car: '宝马'， food：'草莓'}}
console.log(obj2)// {name: 'dandan', love: {car: '宝马'， food：'草莓'}}3.JSON.parse(JSON.stringify())的深拷贝 虽然这种方法可以成功实现嵌套属性的深拷贝，但是也有许多弊端。
- JSON.stringify()方法将对象转化为字符串，但只会处理简单属性和简单属性数组，constructor属性丢失了
- 如果obj里面有时间对象，则JSON.stringify后再JSON.parse的结果，时间将只是字符串的形式，而不是对象的形式。
- 如果obj里有RegExp(正则表达式的缩写)、Error对象，则序列化的结果将只得到空对象；
- 如果obj里有函数，undefined，则序列化的结果会把函数或 undefined丢失；
- 如果obj里有NaN、Infinity和-Infinity（正无穷和负无穷），则序列化的结果会变成null。
- 如果对象中存在循环引用的情况也无法正确实现深拷贝；
4.自定义对象数组深拷贝
function deepClone(obj) {
if (typeof obj !== "object") {
return "克隆的值不是对象哦";
}
//判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝
var objClone = Array.isArray(obj) ? [] : {};
for (key in obj) {
if (obj.hasOwnProperty(key)) {
if (typeof obj[key] === "object" && obj[key] !== null) {
objClone[key] = deepClone(obj[key]);
} else {
objClone[key] = obj[key];
}
}
}
return objClone;
}原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录