深浅拷贝

数据类型

1. 基本数据类型(String,Number,Boolean,Null,Undefined,Symbol)，这个是直接存储在栈内存中
2. 引用数据类型，存储的是该引用的地址，真是的数据是存在堆内存中

浅拷贝

• 拷贝对象改变数据，源对象数据跟着改变

1. 直接赋值

   var obj = {
     name: '袁铭湘',
     age: 24,
     like:['swimming','shopping','music']
   }
   var obj1 = obj;
   obj1.name = '冬瓜';
   obj1.like[1] = '购物';
   console.log('obj1',obj1) // {name: '冬瓜',age: 24,like:['swimming','购物','music']}
   console.log('obj',obj)  // {name: '冬瓜',age: 24,like:['swimming','购物','music']}
   

2. 封装一个浅拷贝方法shallowCopy

   var obj = {
     name: '袁铭湘',
     age: 24,
     like:['swimming','shopping','music']
   }
   
   shallowCopy = (obj) => {
     let = dic = {};
     for( let i in obj) {
         dic[i] = obj[i]
     }
     return dic;
   }
   
   var obj2 = shallowCopy(obj)
   obj2.name = '冬瓜汁';
   obj2.like[1] = '买东西';
   console.log('obj2',obj2) // {name: '冬瓜汁',age: 24,like:['swimming','买东西','music']}
   console.log('obj',obj) // {name: '袁铭湘',age: 24,like:['swimming','买东西','music']}
   

总结

	是否指向同一个对象	第一层是基本数据类型	第二层是引用数据类型
赋值	是	改变数据导致原数据一起改变	改变数据导致原数据一起改变
浅拷贝	否	改变数据导致原数据不会一起改变	改变数据导致原数据一起改变

3. 常见的一些浅拷贝的方法

   • Object.assign()

     var obj = {
       name: '袁铭湘',
       age: 24,
       like:['swimming','shopping','music']
     }
     var obj3 = Object.assign({},obj);
     obj3.like[2] = "音乐";
     console.log('obj3',obj3) // {name: '袁铭湘',age: 24,like:['swimming','shopping','音乐']}
     console.log('obj',obj) // {name: '袁铭湘',age: 24,like:['swimming','shopping','音乐']}
     
     // 当obj只有一层的时候，这个方法是深拷贝
     var obj = {
       name: '袁铭湘',
       age: 24
     }
     var obj3 = Object.assign({},obj);
     obj3.age = 1;
     console.log('obj3',obj3) // {name: '袁铭湘',age: 1}
     console.log('obj',obj) // {name: '袁铭湘',age: 24}
     

   • concat()

   var arr = [1,2,3,["一","二","三"]];
   var arr1 = arr.concat()
   arr1[0] = "one"
   arr1[3][1] = "two"
   console.log('arr1',arr1) //  ["one", 2, 3, ["一", "two", "三"]]
   console.log('arr',arr)  //  [1, 2, 3, ["一", "two", "三"]]
   
   // 当arr只有一层的时候，这个方法是深拷贝
   var arr = [1,2,3];
   var arr1 = arr.concat()
   arr1[0] = "one"
   console.log('arr1',arr1) //  ["one", 2, 3]
   console.log('arr',arr) // [1, 2, 3]
   

   • slice()

     var arr = [1,2,3,["一","二","三"]];
     var arr1 = arr.concat()
     arr1[0] = "one"
     arr1[3][1] = "two"
     console.log('arr1',arr1) //  ["one", 2, 3, ["一", "two", "三"]]
     console.log('arr',arr)  //  [1, 2, 3, ["一", "two", "三"]]
     
     // 当arr只有一层的时候，这个方法是深拷贝
     var arr = [1,2,3];
     var arr1 = arr.slice()
     arr1[0] = "one"
     console.log('arr1',arr1) //  ["one", 2, 3]
     console.log('arr',arr) // [1, 2, 3]
     

4. 常见的深拷贝的方法

   • 手写递归：遍历依次拷贝

   var obj = {
     name: '袁铭湘',
     age: 24,
     like:['swimming','shopping','music']
   }
   
   // 判断数据类型
   typeCheck = (obj) => {
     return Object.prototype.toString.call(obj).slice(8, -1)
   }
   
   // 遍历对象数组
   deepClone = (obj) => {
     let cloneObj, eachType = typeCheck(obj);
     if (eachType === 'Object') {
       cloneObj = {}
     } else if (eachType === 'Array') {
         cloneObj = []
     }else {
        return obj
     }
     for(let i in obj) {
       if(typeCheck(obj[i] === 'Object') || typeCheck(obj[i] === 'Array')) {
         cloneObj[i] = deepClone(obj[i])
       }else {
         cloneObj[i] = obj[i];
       }
     }
     return cloneObj;
   }
   var obj4 = deepClone(obj)
   obj.name = 'ymx'
   obj.like[1] = '游泳'
   console.log('obj4',obj4) // {name: '袁铭湘',age: 24,like:['swimming','shopping','music']}
   console.log('obj',obj) // {name: 'ymx',age: 24,like:['游泳','shopping','music']}
   

   • JSON.parse(JSON.stringify())

   var obj = {
     name: '袁铭湘',
     age: 24,
     like:['swimming','shopping','music']
   }
   var obj3 = JSON.parse(JSON.stringify(obj));
   obj3.name = "ymx";
   obj3.like[2] = "音乐";
   console.log('obj3',obj3) // {name: 'ymx',age: 1,like:['swimming','shopping','音乐']}
   console.log('obj',obj) // {name: '袁铭湘',age: 24,like:['swimming','shopping','music']}
   

   • 利用一些函数库lodash

   var _ = require('lodash');
   var obj1 = { name: "ymx", like: { color: ['pink','red'] }};
   var obj2 = _.cloneDeep(obj1);
   console.log(obj1.like.color === obj2.like.color);  // false