1. 浅拷贝
浅拷贝只拷贝了最外简单数据类型的一层,更深层次对象级别的只拷贝了地址。地址指向同一个内存空间。若改变拷贝后对象深层对象的值,由于地址一直,拷贝前对象深层对象的值也会随之改变。
下面是一个浅拷贝的例子:
var oldObj = {
id: 1,
name: 'Jack',
msg: {
age: 18
}
};
var newObj = {};
// 遍历旧对象,依次拷贝
for (var k in oldObj) {
newObj[k] = oldObj[k];
}
将拷贝后的对象输出:
console.log(newObj);
可以看到,已经拷贝完成。
但是改变一下新对象中深层对象的值,再输出旧对象,发现旧对象深层对象的值也随之改变了:
newObj.msg.age = 20;
console.log(oldObj);
另外,ES6语法中提供了浅拷贝的方法 Object.assign(target, sources)
,其中:
target
:拷贝后的对象
sources
:拷贝前的对象
例如,在本例中:
Object.assign(newObj, oldObj);
console.log(newObj);
同样,也可以完成浅拷贝。
2. 深拷贝
深拷贝拷贝多层, 每一级别的数据都会拷贝,更深层次对象级别的会开辟新的内存空间进行拷贝。新旧对象深层次对象级别的数据地址不同,所以两者独立,改变新对象的值,旧对象不受影响。
下面是个例子:
var oldObj = {
id: 1,
name: 'Jack',
msg: {
age: 18
},
color: ['pink', 'red']
};
var newObj = {};
// 封装函数
function deepCopy(newobj, oldobj) {
for (var k in oldobj) {
// 判断我们的属性值属于那种数据类型
// 1. 获取属性值 oldobj[k]
var item = oldobj[k];
// 2. 判断这个值是否是数组
if (item instanceof Array) {
newobj[k] = [];
// newobj[k]是属性,item是值
deepCopy(newobj[k], item)
} else if (item instanceof Object) {
// 3. 判断这个值是否是对象
newobj[k] = {};
deepCopy(newobj[k], item)
} else {
// 4. 属于简单数据类型
newobj[k] = item;
}
}
}
deepCopy(newObj, oldObj);
console.log(newObj);
得到新的对象:
若改变新对象中age
的值,旧对象中age
的值不会改变,不会受到影响:
newObj.msg.age = 20;
console.log(newObj);
console.log(oldObj);
3. 小结
- 浅拷贝只是拷贝一层,更深层次对象级别的只拷贝地址。
- 深拷贝拷贝多层,每一级别的数据都会拷贝。
以上为个人学习所得理解,若有不妥之处,欢迎评论指正。