js浅拷贝/深拷贝

1. 概述

1. 浅拷贝只是拷贝一层，针对于更深层次的对象级别的数据，只是拷贝引用，因此拷贝之后再修改对象数据时，会把原来的数据一并进行修改操作。
2. 深拷贝拷贝多层，每一级别的数据都会拷贝，而对象级别的数据则会另开辟新的空间

2. 浅拷贝

1. es6新增方法实现浅拷贝：Object.assign(target,…sources)

2. js实现浅拷贝

   var o = {
         
         
           uname: 'zt',
           age: 19,
           mes: {
         
         
               uname: 'zztt'
           }
       };
       var ob = {
         
         };
       for (var k in o) {
         
         
           ob[k] = o[k];
       }
       console.log(ob);
       ob.mes.uname = 'iii';
       console.log(o);
   

3. 解释：对于普通数据类型，直接赋值，但是对于复杂的对象级别的数据，拷贝引用，也即共用同一个空间，而例题中又对对象级别数据进行了修改，因此原数据中的对象级别的数据也会被进一步的跟着修改

   

4. 结果：

可以发现：打印ob和打印o分别在重新赋值前后，理应不一样，但是打印结果却是一样的。原因：观察时间不一样，打开开发者工具，进行断点调试

可以发现打印结果如下：

出现上述原因的主要在于：观察时间不一样，打印mes的时候是花了一定的时间去寻找地址并打印相关的数据，而如果在第一个打印处添加断点，实则等待了第一个查询地址并打印，因此内容为赋值之前的内容。

3. 深拷贝

1. Js实现深拷贝

   function deepCopy(newobj,oldobj) {
         
         
           for (var k in oldobj) {
         
         
               // 获取属性值
               var item = oldobj[k];
               // 判断这个值是否是数组 由于数组也是对象，因此需要先判断
               if (item instanceof Array) {
         
         
                   newobj[k] = [];
                   deepCopy(newobj[k],item);
               } else if (item instanceof Object) {
         
         
                   // 判断这个值是否是对象
                   newobj[k] = {
         
         };
                   deepCopy(newobj[k],item);
               } else {
         
         
                   // 该值属于简单数据类型
                   newobj[k] = item;
               }
           }
       }
   
       var o = {
         
         
           uname: 'zt',
           age: 19,
           mes: {
         
         
               uname: 'zztt'
           }
       }
       var ob = {
         
         };
       deepCopy(ob,o);
       console.log(ob);
       ob.mes.uname = 'iii';// 此时不会影响另一个对象中的值
       console.log(o);