我们首先看下面的例子:
var userInfo = {username:"zhangsan",age:20}
var copyUserInfo = userInfo;
userInfo.username='lisi';
console.log(userInfo);
console.log(copyUserInfo);
结果:
上面对象中的字段类型都是基本类型,所以上面拷贝的都是浅拷贝。
那么怎么实现深度拷贝的,也就说拷贝的对象再次修改互不影响呢?
通过JSON.stringify() 和 JSON.parse() 将对象转为字符串之后在转为对象。
var userInfo = {username:"zhangsan",age:20}
var copyUserInfo = JSON.stringify(userInfo);
userInfo.username='lisi';
console.log(userInfo);
console.log(copyUserInfo);
结果:
注意:该方法的第一个参数必须是空对象
如果已知克隆的对象的属性都是基本类型,如{name: ‘jack’, age: ‘18’},可以利用ES6的Object.assign()实现克隆。
var userInfo = {username:"zhangsan",age:20}
var copyUserInfo = Object.assign({}, userInfo);
userInfo.username='lisi';
console.log(userInfo);
console.log(copyUserInfo);
![在这里插入图片描述](https://img-blog.csdnimg.cn/1a67d51161b6402c987c22102458d760.png)
不过,采用这种方法克隆,只能克隆原始对象自身的值,不能克隆它继承的值。如果想要保持继承链,可以采用下面的代码。
function clone(origin) {
var originProto = Object.getPrototypeOf(origin);
return Object.assign(Object.create(originProto), origin);
}
var obj = {name: 'jack', age: '18'};
var newObj = clone(obj);
该方法的局限性在于,当值为undefined、function、symbol会在转换过程中被忽略。
var userInfo = {username:"zhangsan",age:20}
var copyUserInfo = {...userInfo};
userInfo.username='lisi';
console.log(userInfo);
console.log(copyUserInfo);
以上四种方法只能进行一层拷贝,即当对象的属性值也是对象时,就无法实现该属性的深拷贝,在这里提供一种利用循环递归进行深拷贝的方法。
var obj = {
name: "123",
sex: { age: "小花" }
};
var newObj = {};
function deepClone(obj, newObj) {
var newObj = newObj || {};
for (let key in obj) {
if (typeof obj[key] == 'object') {
newObj[key] = (obj[key].constructor === Array) ? [] : {}
deepClone(obj[key], newObj[key]);
} else {
newObj[key] = obj[key]
}
}
return newObj;
}
console.log(deepClone(obj, newObj));//{name: "123",sex: {age: '小花'}}