js 中赋值、浅拷贝和深拷贝的区别和实现方式

一、 数据类型

js的数据类型分为基本数据类型(String, Number, Boolean, Null, Undefined,Symbol)和引用数据类型。

1. 基本数据类型：直接存储在栈中的数据。
2. 引用数据类型：栈中存储的是该对象的引用地址，真实的数据存放在堆内存中。引用数据类型在栈中存储了指针。当解释器寻找引用值时，会首先检索其在栈中的地址，取到地址后从堆中获得实体。
3. 保存在栈内存的必须是大小固定的数据，引用类型的大小不固定，只能保存在堆内存，把它的地址写在栈内存供访问。
4. 如果是基本数据类型，是按值访问，操作的就是变量保存的值。如果是引用类型的值，只能通过保存在变量中的引用类型地址来操作实际对象。

二、赋值、浅拷贝和深拷贝

只准对 object 和 array 这样的引用数据类型的。

1. 赋值：当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的引用地址，而不是堆中的数据。两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。

2. 浅拷贝：浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象共享一块内存。浅拷贝只能拷贝一层的基本数据类型，多层后就无法拷贝到了。浅拷贝比赋值多了一层。

   function shallowCopy(obj) {
     var prop = {};
     for (var i in obj) {
       if (obj.hasOwnProperty(i)) {
         prop[i] = obj[i];
       }
     }
     return prop;
   }
   

3. 深拷贝：深拷贝会在堆内存中开辟一个新的区域存放新的值，新值和旧值不共享内存。修改新值不影响原值。

三、实现方式

1. 浅拷贝的实现方式

   （1）Object.assign()：可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。

   （2）lodash的clone方法

   （3）扩展...操作符

   （4）Array.prototype.concat，数组的拼接方法

   （5）Array.prototype.slice，数组的截取方法

   （6）手写浅拷贝

2. 深拷贝的实现方式

   （1）JSON.parse(JSON.stringify())：可以处理数组和对象的深拷贝，但是不能处理函数和正则等

        如果obj里存在***时间对象***，得到的是***字符串***
   
        存在***RegExp、Error***对象，得到的是***空对象***
   
        存在***函数、undefined***，会把函数和undefined***丢失***
   
        存在***NaN、Infinity和-Infinity***，会变成***null***
   
        存在***构造函数***生成的，构造函数会被***丢弃***；
   
        对象中存在循环引用（环形变量）会报错
   

   （2）lodash的cloneDeep函数

   （3）jQuery.extend函数

   （4）手写递归实现

四、使用场景

深拷贝
在前台发请求从后台获取数据的时候，获取的一般都是json格式的对象，我们一般要对这些数据进行操作，但是这些数据可能有其他地方也需要使用，就可能会造成很多隐性问题，对数据做一次深拷贝，就能让我们更安全的操作数据了，就不会出现原数据的破坏。
从服务器fetch到数据之后我将其存放在store中，通过props传递给界面，然后我需要对这堆数据进行修改，那涉及到修改就一定有保存和取消，所以我们需要将这堆数据拷贝到其他地方。