js的深浅拷贝

js的深浅拷贝

在vue中的使用
js数据类型:
基本类型：除Object。String、Number、boolean、null、undefined（不影响）
引用类型：object。里面包含的function、Array、Date（影响）

**浅拷贝:**浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。（影响）

如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址。
所以其中一个对象改变了这个地址，就会影响到另一个对象。

**深拷贝:**深拷贝是将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟一个新的区域存放新对象，且修改新对象不会影响原始对象。

针对引用类型来说 赋值 深拷贝 浅拷贝的区别：

• 浅拷贝 赋值的区别：当我们把一个对象赋值给一个新的变量时，赋的其实是该对象在栈中的地址，而不是堆中的数据，也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。
• 浅拷贝：重新在堆中创建内存，拷贝前后对象的基本数据类型不影响，但是拷贝前后对象的引用类型因共享一块内存，会相互影响。
• 深拷贝：从堆内存中开辟一个新的区域存放新对象，对对象中的子对象进行递归拷贝，拷贝前后的两个对象互不影响。

浅拷贝的实现方式:

• Object.assign()
• …展开运算符
• Array.prototype.concat
• Array.prototype.slice
• lodash里面的_.clone

深拷贝的实现方式：

• JSON.parse(JSON.stringify())
• 递归的操作
• cloneDeep
• Jquery.extend()
• date:new RegExp(‘\w+’)
• date:[new Date(1536627600000),new Date(1540047600000)]

//深拷贝
deepClone(obj) {
 var cloneObj = new obj.constructor()；//构建新的函数对象
  if(obj === null) return obj；//判断对象不为null
  if(obj instanceof Date) return new Date(obj)；//是否符合日期格式
  if(obj instanceof RegExp) return new RegExp(obj)；//是否符合正则
  if (typeof obj !== 'object') return obj；     //是否是对象
  for (var i in obj) {//递归
    if (obj.hasOwnProperty(i)) {//判断属性
      cloneObj[i] = this.deepClone(obj[i])
    }
  }
  return cloneObj
}