【JavaScript】轻松掌握JS中的深拷贝与浅拷贝

一、拷贝

浅拷贝官方描述：
如果属性是基本数据类型，拷贝的就是基本数据类型的值，如果属性是引用类型，拷贝的就是内存地址，修改新拷贝的对象会影响原对象。
深拷贝官方描述：
讲一个对象从内存中完整的拷贝出来，从堆内存中开辟一个新的区域存放新的对象，且修改新对象不影响原对象。

浅拷贝：修改拷贝的对象不影响原对象。
深拷贝：修改拷贝的对象影响原数据，对应开辟新的内存空间。

二、深拷贝

1、拷贝数组

（1）concat方法

 var arr =[1,2,3,{name:'小明',age:20}];
 var newArr=arr.concat();
 arr[3].name="小红";
 console.log(arr);
 //{name:"小红",age:20}
 console.log(newArr);
 //{name:"小红",age:20}

（2）slice方法

var arr =[1,2,3,{name:'小明',age:20}];
var newArr = arr.slice(0);
newArr[3].name = '小红';
console.log(arr);
console.log(newArr);

（3）延展运算符

var arr =[1,2,3,{name:'小明',age:20}];
var newArr = [...arr];
arr[3].name = '小红';
console.log(arr);
console.log(newArr);

2、拷贝对象

1、直接拷贝

var obj1={
  name:'小明',
  cars:[
    '奔驰',
    ‘宝马’,
  ]
}
var obj2=obj1

2、assign
对象的合并，将源对象的所有可枚举属性，复制到目标对象

var obj1={
  name:'小明',
  cars:[
    '奔驰',
    ‘宝马’,
  ]
}
// 目标对象 源对象
var obj2=object.assign({},obj1)

三、深拷贝

1、JSON

JSON.stringify 将JS对象转化成JSON串—序列化
JSON.parse 将JSON字符串转化为对象—反序列化

不足：不能拷贝undefined、RegExp、Date
对象中函数函数，属性会被直接忽略
对象中有undefined，属性会被直接被忽略
对象中RegExp，拷贝后会为空
对象中Date，会转化为字符串

   const school={
     name :'北京四中',
     xuexi:['语文','数学','英语'],
     improve(){
       console.log("我爱学习");
     }
   }

   //将对象转化为字符串
   let str =JSON.stringify(school);
   //{"name":"北京四中","xuexi":["语文","数学","英语"]}

   //将字符串转化为JS对象
   let newSchool=JSON.parse(str);
   //修改新对象属性
   newSchool.xuexi[0]="物理";

   console.log(school);
   // ["语文", "数学", "英语"]
   console.log(newSchool);
   // ["物理", "数学", "英语"]

2、递归方式

const school = {
    name :'北京四中',
    xuexi:['语文','数学','英语'],
  }
    founder:{
        name:'张三',
        age: 42
    },
    improve: function(){
        console.log('提高技能');
    }
};

  //获取数据的类型      
  function getDataType(data){
      // [object Array]
      // [object Object]
      return Object.prototype.toString.call(data).slice(8, -1);
  }

  function deepClone(data){
      //判断数据的类型
      let type = getDataType(data);
      //声明变量  容器
      let container;
      if(type === 'Array'){
          container = [];
      }
      if(type === 'Object'){
          container = {};
      }
      //遍历
      for(let i in data){
        //获取类型
         let t = getDataType(data[i]);
         if(t === 'Array' || t === 'Object'){
             //创建容器
             //遍历数据
             container[i] = deepClone(data[i]);

         }else{
             //复制目标数据的值
             container[i] = data[i];
         }
      }
      //返回复制后的数据
      return container;
  }

  const newSchool = deepClone(school);
  // const newSchool2 = deepClone([1,2,3]);

  //修改 newSchool 的值
  newSchool.xueke[0] = '物理';
  console.log(school);
  console.log(newSchool);