深拷贝和浅拷贝

浅拷贝和深拷贝的区别：

数据类型：

数据分为基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)和对象数据类型

• 基础数据类型的特点：直接存储在栈中的数据；
• 引用数据类型的特点：Array，对象，Function 存储的是该对象在栈中引用，真实的数据存放在堆内存里。

• 当解析器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。

  
  3919179130-5bad88d163aae_articlex.jpeg

深拷贝和浅拷贝是针对复杂数据类型来说的，浅拷贝只拷贝一层，而深拷贝是层层拷贝
1、浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存
2、深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

浅拷贝：

• 浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝
• 如果属性是基本类型，拷贝的就是基本类型的值；
• 如果属性是内存地址（引用类型），拷贝的就是内存地址
  1、浅拷贝和直接赋值的区别：

var obj1={
name:'lei',
age:23,
test:[1,2,3,[2,3,43]]
}
var obj2=obj1;
obj2.name='lyan'
obj2.test[1]=['二','三']
console.log('obj1',obj1);
console.log('obj2',obj2);

WechatIMG58612.png

从打印结果可以看出
我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址,修改一个另外一个也会改变，是联动的。

var obj1={
name:'lei',
age:23,
test:[1,2,3,[2,3,43]]
}
var obj3=shallowCopy(obj1);
obj3.name='lyan';
obj3.test[1]=['二','三']
function shallowCopy(obj){
var dst={}
for(var key in obj){
   if(obj.hasOwnProperty(key)){
   dst[key]=obj[key]
   }
}
return dst;
}

console.log('obj1',obj1);
console.log('obj3',obj3);

WechatIMG527.png

浅拷贝是按照位拷贝对象，它会创建一个新的对象，
如果属性是基本类型，拷贝的就是基本类型的值；
如果是引用类型，拷贝的就是内存地址，如果改变了一个，会影响另外一个。

2、浅拷贝实现的方式：
(1)、Object.assign()
Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。但是 Object.assign()进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。

var obj={a:{a:'Leiyan',b:22}}
var obj2=Object.assign({},obj)
obj2.a.a='lyan'
console.log(obj.a.a)  //'lyan'  原来的obj 值也发生了改变

注意：当object只有一层的时候，是深拷贝

var obj={a:'Lei'}}
var obj2=Object.assign({},obj)
obj2.a.a='lyan'
console.log(obj.a)  //'Lei' 
console.log(obj2.a)  //'lyan' 

(2)、Array.prototype.concat()

let arr=[1,3,{name:'lyan'}]
let arr2=arr.concat()
arr2[2].name='leiyanyan'
console.log(arr)   // [1,3,{name:'leiyanyan'}]   修改新对象改变了原对象
console.log(arr2)  // [1,3,{name:'leiyanyan'}]

(3)、Array.prototype.concat()

关于Array的slice和concat方法的补充说明：Array的slice和concat方法不修改原数组，只会返回一个浅复制了原数组中的元素的一个新数组。

深拷贝

深拷贝复制变量值，对于非基本类型的变量，则递归至基本类型变量后，再复制。 深拷贝后的对象与原来的对象是完全隔离的，互不影响，对一个对象的修改并不会影响另一个对象。

深拷贝实现的方式：

1、JSON.parse(JSON.stringify())

原理： 用JSON.stringify将对象转成JSON字符串，再用JSON.parse()把字符串解析成对象，一去一来，新的对象产生了，而且对象会开辟新的栈，实现深拷贝。但是这个方法有一定的缺陷：
1、这种方法虽然可以实现数组或对象深拷贝,但不能处理函数；
2、原型链上的属性无法拷贝；
3、不能正确的处理 Date 类型的数据，不能处理 RegExp，会忽略 symbol，忽略 undefined；

2、手写递归

function checkedType(target){
      return Object.prototype.toString.call(target).slice(8,-1);
    }

    function deepClone(target){
      // 判断拷贝的数据类型
      // 初始化变量result，成为最终克隆的数据
      let result, targetType = checkedType(target);
      
      if(targetType==='object'){
        result = {}
      }else if(targetType==='Array'){
        result = []
      }else{
        return target
      }
      // 遍历目标数据
      for( let i in target){
        // 遍历数据结构的每个值
        let value = target [i];
        if(checkedType(value)==='Object' || checkedType(value)==='Array' ){
          result[i] = deepClone(value)
        }else{ // 获取value 的值是基本数据类型或者是函数
          result[i] = value
        }
      }
      return result
    }
    let lei=[1,2,3,344],
    b=deepClone(lei)
    lei[0]=88
   console.log(lei,b) // [888,2,3,344],  [1,2,3,344]

深拷贝（deep copy）：复制并创建一个一摸一样的对象，不共享内存，修改新对象，旧对象保持不变；实现深拷贝主要有2种方法

浅拷贝（shallow copy）：只复制指向某个对象的指针，而不复制对象本身，新旧对象共享一块内存；