深拷贝和浅拷贝在各大语言中都有体现,这篇博客谈谈我对JavaScript中深浅拷贝的理解。
浅拷贝
浅拷贝只是拷贝一层,更深层次对象级别的只拷贝引用地址。
这句话怎么理解呢?来看下面这个例子:
let obj = {
id: 1,
name: '李小龙',
message: {
age: 18
}
}
let o = {}
我现在想要对象o拷贝对象obj,浅拷贝的原理就是通过for循环,为o对象添加属性和属性值:
// for in 实现浅拷贝
for (k in obj) {
o[k] = obj[k]
}
console.log(o)
这样一来我们就可以看到,o对象已经成功实现了拷贝。
但是,我们说了,浅拷贝只是拷贝一层,更深层次的只拷贝引用地址。什么叫做拷贝引用地址?此时我们对o对象的深层次属性进行修改,你就知道什么叫做只拷贝引用地址了:
o.name = '周杰伦'
//通过对象o修改深层属性值
o.message.age = 20
console.log(o.name) //周杰伦
console.log(obj.name) //李小龙
console.log(o.message.age) //20
console.log(obj.message.age) //20
惊奇地发现,修改了o的深层属性age,居然把obj的age也给改了。
这就是我们说的:浅拷贝只是拷贝一层,更深层次的只是拷贝引用地址,因此通过其中任何一个对象修改深层属性的属性值时,每个对象的属性值都会被改变(注意,修改第一层的属性值是互不影响的)
ES6中的浅拷贝
在ES6中,我们还可以通过另一种更加推荐的方式来实现浅拷贝:
let obj = {
id: 1,
name: '李琳琦',
message: {
age: 18
}
}
let o = {}
// Object.assign 实现浅拷贝
Object.assign(o, obj)
-
Object.assign接受两个参数,一个是拷贝的对象,一个是被拷贝的对象
-
Object.assign的实现结果和for...in...的实现结果是一模一样的
深拷贝
-
深拷贝拷贝多层,每一级别的数据都会拷贝
-
实现的思路是封装一个深拷贝的函数,通过if判断类型,递归调用函数
-
分别判断数组、对象、普通数据类型,注意数组的判断要放在对象的判断之前,因为数组也是对象
-
修改深层属性的属性值,原对象不会受影响
代码实现:
// 深拷贝拷贝多层, 每一级别的数据都会拷贝.
var obj = {
id: 1,
name: 'andy',
msg: {
age: 18
},
color: ['pink', 'red']
};
var o = {};
// 封装函数
function deepCopy(newobj, oldobj) {
for (var k in oldobj) {
// 判断我们的属性值属于哪种数据类型
// 1. 获取属性值 oldobj[k]
var item = oldobj[k];
// 2. 判断这个值是否是数组
if (item instanceof Array) {
newobj[k] = [];
deepCopy(newobj[k], item)
} else if (item instanceof Object) {
// 3. 判断这个值是否是对象
newobj[k] = {};
deepCopy(newobj[k], item)
} else {
// 4. 属于简单数据类型
newobj[k] = item;
}
}
}
deepCopy(o, obj);
console.log(o);
o.msg.age = 20;
console.log(obj);
深拷贝就不会出现浅拷贝的那个问题了。