js中的深拷贝和浅拷贝
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
在了解js中深拷贝及浅拷贝之前先让我们看一下js的栈内存和堆内存 栈内存的六种数据类型:String Number Boolean undefined null Symbol 栈内存会开辟出一个新的空间存放数据,因此当a的值发生变化时,b的值不会改 let a = 10; let b = a; a = 20 //console.log(a,b); a的值为20,b的值不变还是10
**堆内存的三种数据类型: Object Array Function
堆内存数据的复制只是指向了同一个存放数据的地址,因此当x值改变时,y值也会改变**
**浅拷贝: y复制x,x,y发生关联,两者属性值指向同一内存空间。简单来讲,就是改变其中一个对象,另一个对象也会跟着改变**
let x = [2,3,4],
y = x
x[0] = 10;
//console.log(x,y)
***x的值为[10,3,4],y的值跟着改变为[10,3,4]***
**深拷贝: 拷贝对象各个层级的属性。简单的讲,就是复制出来的每个对象都有属于自己的内存空间,不会互相干扰。**
**可用js中JSON.stringify()和JSON.parse()来实现深拷贝**
function deepClone(obj){
let newObj = JSON.stringify(obj)
let cloneObj = JSON.parse(newObj)
return cloneObj
}
let m = [1,2,3,[4,5]]
n = deepClone(m)
m[0] = 0;
m[3][0] = 6;
console.log(m,n)
***m的值为[0,2,3,[6,5]],n的值为[1,2,3,[4,5]]***