JS的深拷贝与浅拷贝

mac2024-05-29  44

深拷贝和浅拷贝主要是针对对象赋值的。

对象a赋值给对象b,实际上只是b接受了a对象的指针。当引用对象b时,先引用a的地址,再引用a的属性和方法。

这样,如果对a的属性值进行修改的时候,再引用b时,b的属性值也会发生变化。

为了避免这种混乱的局面,js提出浅拷贝和深拷贝的概念。

浅拷贝  Object.assgin() 或 {...}

浅拷贝对象时,会直接把原对象内的属性值都赋值到新对象中。例如:

let a = { age: 1 } let b = Object.assign({}, a) a.age = 2 console.log(b.age) // 1

但是这种方法也有弊端,即不能深拷贝是对象的属性值,拷贝的是地址。

浅拷贝也可以通过展开运算符来实现。

let a = { age: 1 } let b = { ...a } a.age = 2 console.log(b.age) // 1

深拷贝 ——如果对象属性值是对象的话,就要用到深拷贝了。

例如:

let a = { age: 1, jobs: { first: 'FE' } } let b = { ...a } a.jobs.first = 'native' console.log(b.jobs.first) // native

这里虽然对对象a用了浅拷贝,但是对象的属性jobs也是对象,拷贝的时候这个属性并没有按属性值赋给对象b。这种情况需要用到深拷贝。

JSON.parse(JSON.stringify(object))

let a = { age: 1, jobs: { first: 'FE' } } let b = JSON.parse(JSON.stringify(a)) a.jobs.first = 'native' console.log(b.jobs.first) // FE

但是这种方法也有缺点,对于undefined的属性,symbol,序列化函数,循环引用等 不能深拷贝。具体请听下回分解。

最新回复(0)