JavaScript浅拷贝和深拷贝

一.JavaScript的两种变量类型

JavaScript变量的类型分为两种：基本类型和引用类型。

1. 基本类型是指简单的数据段，包含 String、Number、 Boolean、Undefined 和 Null。
   基本类型是按值访问的，例如：修改b的值，a的值没有改变。

   var a = 1;
   var b = a;
   b = 5;
   console.log(a)  //1
   console.log(b)  //5
   

2. 引用类型是指可能有多个值构成的对象，一般为： Object, Array, function 等
   引用类型的值是按地址访问的，例如

   var a = [1,2,3]
   var b = a 
   b[1] = 4
   console.log(a) //[1,4,3]
   console.log(b) //[1,4,3]
   

   修改了b的值a的值也跟着改变，是因为把a赋值给b，只是将a存储在栈堆中的引用赋予了b，并没有把a的整体值重新复制一份给b，这俩个对象指向的是在堆内存中的同一个数据。

二.什么是浅拷贝和深拷贝

1. 对基本类型变量，浅拷贝是对值的拷贝，没有深拷贝的概念。
2. 对引用类型来说，浅拷贝是对对象地址的拷贝，并没有开辟新的栈，复制的结果是两个对象指向同一个内存地址，修改其中一个对象的属性，另外一个对象的属性也会改变； 而深拷贝则是开辟新的栈，将引用类型的值全部拷贝一份，形成一个新的引用类型。

三.实现深拷贝的方法（本人经常用的）

我们希望在改变新的数组（对象）的时候，不改变原数组（对象）

1. JSON.stringify()和JSON.parse()

   var a = {name: 'Marry', age: 18}
   var b = JSON.parse(JSON.stringify(a))
   b['name'] = 'Tom'
   console.log(a) //{name: 'Marry',age: 18}
   console.log(b) //{name: 'Tom',age: 18}
   

   注意：这种方式不可以拷贝 undefined ， function， RegExp 等等类型的

2. 递归

   function deepClone(obj) {
     //判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝
     var objClone = Array.isArray(obj) ? [] : {};
     if (obj && typeof obj === "object") {
       for (key in obj) {
         if (obj.hasOwnProperty(key)) {
           if (obj[key] && typeof obj[key] === "object") {
             objClone[key] = deepClone(obj[key]);
           } else {
             objClone[key] = obj[key];
           }
         }
       }
     }
     return objClone;
   }