浅拷贝
浅拷贝只能拷贝对象里面的一层,不能拷贝对象里面更深层次的属性和属性值。例如:
var oldObj = {
id: 1,
name: 'charlie',
msg: {
age: 18
}
}
对于oldObj对象,浅拷贝只能拷贝oldObj.id
,oldObj.name
,而不能拷贝更深层次的数据oldObj.msg.age
浅拷贝复制的其实是内存地址,复制后的新对象跟旧对象共用内存指针,当其中一个对象修改属性或属性值时,另一个对象对应的属性或属性值也会随之修改
var newObj = {}
for (var k in oldObj) {
// k 是属性名 oldObj[k] 属性值
newObj[k] = oldObj[k]
}
console.log(newObj)
newObj.msg.age = 20 //新对象修改属性值
console.log(oldObj) // oldObj.msg.age=20
在ES6中,我们可以使用语法糖直接进行浅拷贝
Object.assign(target, source)
于是,对于上述代码,我们可以直接写成:
Object.assign(newObj, oldObj)
console.log(newObj)
newObj.msg.age = 20
console.log(oldObj)
深拷贝
深拷贝可以拷贝多层, 每一级别的数据都会拷贝,旧对象会将更深层次的引起类型复制出来重新开辟一个内存空间复制给新对象使用,这样新旧对象不再共用一个内存地址,当其中一个对象的属性或属性值被修改时,另一个对象的属性或属性值不会受到影响。
var oldObj = {
id: 1,
name: 'charlie',
msg: {
age: 18
},
color: ['pink', 'red']
}
var newObj = {}
var arr = []
// 封装函数
function deepCopy(newobj, oldobj) {
for (var k in oldobj) {
// 判断我们的属性值属于那种数据类型
// 1. 获取属性值 oldobj[k]
var item = oldobj[k]
// 2. 判断这个值是否是数组
if (item instanceof Array) {
newobj[k] = [] //此处先判断数组是因为数组也属于Object,如果先判断Object后判断Array,则函数不会往下执行判断下一个语句
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)
newObj.msg.age = 20
console.log(oldObj) // oldObj.msg.age没有被修改