B复制A,A改变,B改变则为浅拷贝,不改变为深拷贝
基本类型 名值存储在栈内存中 -- 深拷贝
简单的来说就是,在有指针的情况下,浅拷贝只是增加了一个指针指向已经存在的内存,而深拷贝就是增加一个指针并且申请一个新的内存,使这个增加的指针指向这个新的内存,采用深拷贝的情况下,释放内存的时候就不会出现在浅拷贝时重复释放同一内存的错误!
在js中,对于非基本类型数据(普通对象或数组),浅拷贝只是拷贝了内存地址,子类属性指向父类属性的内存地址,而子类修改后父类也会被修改
基本类型复制.png
引用数据类型 名存储在栈内存中,值存在堆内存中 栈内存会提供一个引用的地址指向堆内存中的值
引用数据复制.png
法一:
通过递归实现封装一个对象({}|[])深拷贝的函数 深拷贝拷贝对象各个层级的属性
function deepClone(obj) {
let cloneObj = Array.isArray(obj)?[]:{}
if(obj && typeof obj == "object"){
for(let key in obj) {
if(obj[key] && typeof obj[key] === "object"){
cloneObj[key] = deepClone( obj[key] )
}else {
cloneObj[key] = obj[key]
}
}
}
return cloneObj;
}
let a = [1,2,3,4]
b = deepClone(a)
a[0] = 2
console.log(a,b)
===>a:[2,2,3,4] b:[1,2,3,4]
slice()和conca方法并不是深拷贝,元素只有一级时,可以实现深拷贝,子对象里还有对象,就无法实现
let a = [1,2,3,4]
b = a.slice()
a[0] = 2;
console.log(a,b)
===>a:[2,2,3,4] b:[1,2,3,4]
let a = [1,2,[2,3],4]
b = a.slice()
a[0] = 2;
a[2][0] = 1
console.log(a,b)
===>a:[2,2,[1,3],4] b:[1,2,[1,3],4]
===>拷贝不彻底,一级属性的确不受影响,但二级属性没拷贝成功,所以不是真正的深拷贝
法二:
借用JSON对象的parse和stringify
function deepClone(obj){
let _obj = JSON.stringify(obj),
objClone = JSON.parse(_obj);
return objClone
}
let a=[0,1,[2,3],4],
b=deepClone(a);
a[0]=1;
a[2][0]=1;
console.log(a,b);
法三
借用JQ的extend方法
$.extend([deep],target,object1[,objectN])
deep表示是否深拷贝,为true为深拷贝,为false,则为浅拷贝
target Object类型 目标对象,其他对象的成员属性将被附加到该对象上。
object1 objectN可选。 Object类型 第一个以及第N个被合并的对象。
let a=[0,1,[2,3],4],
b=$.extend(true,[],a);
a[0]=1;
a[2][0]=1;
console.log(a,b);