深拷贝和浅拷贝主要是针对对象赋值的。
对象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,序列化函数,循环引用等 不能深拷贝。具体请听下回分解。