浅析赋值、浅拷贝、深拷贝的区别

1、原理

赋值：将某一对象赋给某个变量的过程，称为赋值。

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

深拷贝：深拷贝就是将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟一个新的区域存放新对象，且修改新对象不会影响原有的对象。

2、区别

赋值：当我们将一个对象赋值给另外一个新的变量时，赋的其实是该对象在栈中的地址，而不是堆中的数据。也就是说，两个对象同时指向一个存储空间，是联动的，无论修改哪个对象都会影响另一个对象。

浅拷贝：如果拷贝对象修改的属性是基本数据类型，则不会影响原始对象；如果修改的属性是引用类型，则会影响原始对象。

深拷贝：新拷贝对象会在内存中拷贝一份新的数据存储，因此不论如何修改都不会改变原有对象。

3、实现方式

浅拷贝：

const originObj = {person: 'Jack'};
// 1.Object.assign()
const newObj1 = Object.assign({}, originObj);
// 2.Lodash中的_.clone()方法
const newObj2 = _.clone(originObj);
// 3.展开运算符...
const newObj3 = {...originObj};
// 4.array.prototype.concat()
const newObj4 = ['1','2','3'].concat();
// 5.array.prototype.slice()
const newObj5 = ['1','2','3'].slice();

深拷贝：

const originObj = {person: 'Jack'};
// 1.JSON.parse(JSON.stringify())
const newObj1 = JSON.parse(JSON.stringify(originObj));
// 2.Lodash中的_.cloneDeep()方法
const newObj2 = _.cloneDeep(originObj);
// 3.extend()
const newObj3 = $.extend(true, {}, originObj);