普通赋值和浅拷贝与深拷贝原理与区别

普通赋值

在引用类型数据(如array，object)进行赋值的时候，只是赋值的该数据在堆内存的地址罢了，如下图

 

  当其中任意一个变量改变数据，数据同时发生改变，如下图

 

问题：新变量的改变破坏的原数据，这时候就要用到浅拷贝

浅拷贝

以对象为例：

创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。 如果属性是基本类型，拷贝的就是基本类型的值。 如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。

可以理解为浅拷贝只拷贝了一层，拷贝第一层的基本类型值以及第一层的引用类型地址（考虑性能）

例子

let obj1 = {
    one: {
        age: 18,
    },
    two: {
        age: 12
    },
}
let obj2 = { ...obj1 };   // 浅拷贝写法，数组是[...obj1]这样写的
obj2.one = 'three'          // 在浅拷贝中，第一层并不能改变原对象的数据
obj2.two.age = 32;          // 在浅拷贝中，第二层可以改变原对象的数据
console.log('obj1',obj1);
console.log('obj2',obj2);
复制代码

效果图

 

深拷贝

深拷贝则是不计较内存，将原数据完全拷贝的重新创建一个堆内存

例子

let obj1 = {
    one: {
        age: 18,
    },
    two: {
        age: 12
    },
}
let obj2 = JSON.parse(JSON.stringify(obj1))   //深拷贝写法，数组也是这样写
obj2.one = 'three'          // 在深拷贝中，第一层不能改变原对象的数据
obj2.two.age = 32;          // 在深拷贝中，第二层也不能改变原对象的数据
console.log('obj1',obj1);
console.log('obj2',obj2);
复制代码

效果