深浅拷贝
基本数据类型的特点:直接存储在栈(stack)中的数据
引用数据类型的特点:存储的是该对象在栈中引用,真实的数据存放在堆内存里
浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。
但深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。
浅拷贝
浅拷贝是什么?浅拷贝是创建一个`新对象`,这个对象有原始对象属性的一份精确拷贝。
如果属性是基本类型,拷贝的就是基本类型的值;
如果属性是引用类型,拷贝的就是内存地址
浅拷贝和赋值的区别:赋值不创建`新对象`
当我们把一个对象赋值给一个新的变量时,赋的其实是该对象的在栈中的地址,而不是堆中的数据。也就是两个对象指向的是同一个存储空间,无论哪个对象发生改变,其实都是改变的存储空间的内容,因此,两个对象是联动的。
浅拷贝是按位拷贝对象,它会创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型,拷贝的就是基本类型的值;如果属性是内存地址(引用类型),拷贝的就是内存地址 ,因此如果其中一个对象改变了这个地址,就会影响到另一个对象。即默认拷贝构造函数只是对对象进行浅拷贝复制(逐个成员依次拷贝),即只复制对象空间而不复制资源。
let person ={
name:"咪咪",
hobby:['鱼肉','鸡肉','猫粮']
};
//浅拷贝函数
function shallowCopy(source){
//突出一个`新`字
let obj = {}
for(let i in source){
//hasOwnProperty(propertyName)方法
//是用来检测属性是否为对象的自有属性,如果是,返回true,否者false;
//参数propertyName指要检测的属性名;
if(source.hasOwnProperty(i)){
obj[i]=source[i]
}
}
return obj
};
let shallowPerson=shallowCopy(person);
shallowPerson.name="狗狗";
console.log(shallowPerson);
console.log(person);
shallowPerson.hobby[0]="大棒骨";
console.log(shallowPerson);
console.log(person);
浅拷贝的实现方式
1.Object.assign()
Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。但是 Object.assign()进行的是浅拷贝,拷贝的是对象的属性的引用,而不是对象本身。
var dog = {
a:{
a:'柯基',
b:10
}
};
var newDog = Object.assign({},dog);
newDog.a.a='拉布拉多';
console.log(dog.a.a) //拉布拉多
注意:当object只有一层的时候,使深拷贝
var dog = {
a:'柯基',
};
var newDog = Object.assign({},dog);
newDog.a='拉布拉多';
console.log(dog.a) //柯基
2.Array.prototype.concat()
3.Array.prototype.slice()
深拷贝
深拷贝是什么?深拷贝拷贝的是创建一个`新对象`。
深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,彼此完全独立。
如果属性是基本类型,拷贝的就是基本类型的值;
如果属性是引用类型,拷贝的不是内存地址而是要从堆内存中开辟一个新的区域存放新对象,彼此完全独立。
深拷贝的实现方式
1.JSON.parse(JSON.stringify())
这种方法虽然可以实现数组或对象深拷贝,但不能处理函数
2.手写递归方法
递归方法实现深度克隆原理:遍历对象、数组直到里边都是基本数据类型,然后再去复制,就是深度拷贝
function deepCopy(source){
//判断拷贝的数据类型
if(source === null ) return source
if(source instanceof Date ) return new Date()
if(source instanceof RegExp ) return RegExp(source)
if(typeof source !== 'object') return source
let obj= Array.isArray(source) ? [] : {}
//遍历目标数据
for(let i in source){
if(source.hasOwnProperty(i)){
obj[i] = deepCopy(source[i])
}
}
return obj
}
let person ={
name:"咪咪",
hobby:['鱼肉','鸡肉','猫粮',{name:'憨憨'}],
date:new Date()
};
let deepPerson=deepCopy(person)
deepPerson.hobby[0]='大棒骨嘿'
deepPerson.hobby[3].name='狗仔'
console.log(person)
console.log(deepPerson)
3.函数库lodash
该函数库也有提供_.cloneDeep用来做 Deep Copy
总结:
– | 和原数据是否指向同一对象 | 第一层数据为基本数据类型 | 原数据中包含子对象 |
---|---|---|---|
赋值 | 是 | 改变会使原数据一同改变 | 改变会使原数据一同改变 |
浅拷贝 | 否 | 改变不 会使原数据一同改变 | 改变会使原数据一同改变 |
深拷贝 | 否 | 改变不 会使原数据一同改变 | 改变不 会使原数据一同改变 |