深拷贝和浅拷贝运用

一、什么是深拷贝和浅拷贝

• 浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是指向内存的地址 ，所以如果其中一个对象改变了这个引用类型的值，就会影响到另一个对象。
• 深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。

二、实现深拷贝的五种方式

1. 递归
   

   // 递归调用
   const deepCopy = (obj) => {
     // 判断传入的值是否为一个对象
     if (obj === null && typeof obj !== "object") {
       return obj;
     }
     // 判断对象的类型 注意这里不考虑包装类对象
     if (Object.prototype.toString.call(obj) === "[object Date]") {
       return new Date(obj);
     }
     if (Object.prototype.toString.call(obj) === "[object RegExp]") {
       return new RegExp(obj);
     }
     if (Object.prototype.toString.call(obj) === "[object Undefined]") {
       return new Error(obj);
     }
     // 判断对象是类
     let newObj = Array.isArray(obj)  ? [] : {}
     for(let item in obj){
       if(typeof obj[item] === 'object') {
           newObj[item] = deepCopy(obj[item])
       }else {
           newObj[item] = obj[item]
       }
     }
     return newObj
   };
   
   const foo = {
       name: '张三',
       info: {
           age: 24
       }
   }
   const newFoo = deepCopy(foo)
   console.log(foo, newFoo)
   foo.info.age = 25
   console.log(foo, newFoo)

2. JSON.stringify + JSON.parse
   

   使用：
   JSON.parse(JSON.stringify(data))

   更多关于JSON.stringigy的注意事项请看：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

3. lodash
   

   const _ = require('lodash')
   const foo = {
       name: '张三',
       info: {
           age: 24
       }
   }
   const newFoo = _.cloneDeep(foo);
   foo.info.age = 25
   console.log(foo, newFoo) // { name: '张三', info: { age: 25 } } { name: '张三', info: { age: 24 } }

4. Object.assgin
   

   注意：只有当对象中没有嵌套对象时，才可以实现深拷贝
   const foo = {
       name: '张三',
       age: 24
   }
   const newFoo = Object.assign({}, foo)
   foo.age = 25
   console.log(foo, newFoo) // {name: '张三', age: 25} {name: '张三', age: 24}
   
   // 对象中有内嵌的对象时
   const foo = {
       name: '张三',
       info: {
           age: 24
       }
   }
   const newFoo = Object.assign({}, foo)
   foo.info.age = 25
   console.log(foo, newFoo) // { name: '张三', info: { age: 25 } } { name: '张三', info: { age: 25 } }