两者最主要的区别为其在内存中的存储类型不同。
浅拷贝
浅拷贝就类似于复制,把对象中的内容,复制出来给另一个对象。
创建新的数据,这个数据有着原始数据属性值的精准拷贝。若属性值为基本类型,拷贝的是值;若属性值为引用类型,拷贝的是内存地址。
实现浅拷贝:
手写一个浅拷贝:只拷贝对象或数组的第一层内容。基本类型直接拷贝,对于引用类型,只拷贝第一层。
const _shallowClone = target => {
if(typeof target === 'object' && target !== null) {
const cloneTarget = Array.isArray(target)?[]:{}
for(let prop in target) {
if(target.hasOwnProperty(prop)){
cloneTarget[prop] = target[prop]
}
}
return cloneTarget
}
else{
return target
}
}
Object.assign() :可以把任意多个的原对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。但是 Object.assign() 进行的是浅拷贝,拷贝的是对象的属性的引用,而不是对象本身。
const _shallowClone = target => {
var obj = Object.assign({},target)
return obj
}
深拷贝
开辟一个新的栈,两个对象属性完全相同,但对应的地址不同。修改一个对象的属性,不会改变另一个对象的属性。
实现深拷贝:
手写一个深拷贝:层层拷贝对象或数组的每一层内容
const _sampleDeepClone = target => {
if(typeof target === 'object' && target !== null) {
const cloneTarget = Array.isArray(target) ? [] : {}
for(let prop in target) {
if(target.hasOwnProperty(prop)){
cloneTarget[prop] = _sampleDeepClone(target[prop])
}
}
return cloneTarget
}
else{
return target
}
}
JSON.parse(JSON.stringify()):虽然可以实现数组或对象深拷贝,但不能处理函数等
const _sampleDeepClone = target => {
return JSON.parse(JSON.stringify(target))
}
区别:
复制对象属性时,行为不一样。浅拷贝只复制指向对象的指针,而不是复制对象本身,新旧对象还是共用一块内存,修改对象属性会影响原对象;深拷贝是创造一个一摸一样的对象,新对象和原对象不共享内存,修改新对象不会改动原对象。浅拷贝只复制对象或数组的第一层属性,深拷贝对于对象的属性会进行递归复制。