js中对象赋值存在的问题(浅拷贝,深拷贝)

首先对于js中字符串的赋值有如下代码:

let a = 'lee'
let b = a
b = 'cheng'
console.log(a) // 输出结果仍为lee

而对于js中对象的赋值假如采用以下的方式:

let a = { name: 'lee' }
let b = a
b.name = 'cheng'
console.log(a.name) // 输出结果为cheng

出现以上结果的原因在于js在将一个对象赋给另外一个对象的时候, 实际上是将一个对象的引用赋给了另外一个对象, 使得这两个对象指向同一个引用; 当修改其中一个对象时, 相当于修改了它们共同的引用

因此, 假如我们只想要将一个对象的值赋给另外一个新对象, 而不希望在修改新对象的属性值时导致原来赋值的那个对象属性值被修改, 我们可以采用如下的方式:

1.利用对象拓展运算符...

ES2018 将数组的拓展运算符...引入了对象。

用法如下:

let a = { name: 'lee' }
let b = {...a}
b.name = 'cheng'
console.log(a.name) // 输出结果为lee

2.Object.assign()方法

用法如下:

let a = { name: 'lee' }
let b = {}
Object.assign(b, a)
b.name = 'cheng'
console.log(a.name) // 输出结果为lee

**注意:**以上实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。

const obj1 = {a: {b: 1}};
const obj2 = Object.assign({}, obj1);

obj1.a.b = 2;
obj2.a.b // 2

关于深拷贝和浅拷贝:

在js中变量类型分为基本类型和引用类型(Object类型)

而js中存储变量的方式分为:栈(stack)和堆(heap)

• 栈:保存基本类型的值和引用类型的地址, 自动分配内存空间，系统自动释放
• 堆:保存引用类型的值, 动态分配的内存，大小不定，也不会自动释放

浅拷贝:被复制对象的所有变量都含有与原来的对象相同的值，而所有的对其他对象的引用仍然指向原来的对象。即对象的浅拷贝会对“主”对象进行拷贝，但不会复制主对象里面的对象。”里面的对象“会在原来的对象和它的副本之间共享。

深拷贝不仅将原对象的各个属性逐个复制出去，而且将原对象各个属性所包含的对象也依次采用深复制的方法递归复制到新对象上,所以对一个对象的修改并不会影响另一个对象。