浅谈JavaScript的 深拷贝和浅拷贝

深拷贝

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

浅拷贝

浅拷贝是会将对象的每一个属性进行依次复制，可是当对象的属性值是引用类型时，实质复制的是其引用，当引用指向的值改变时也会跟着变化。

区别

浅拷贝和深拷贝都只针对于引用数据类型。

• 浅拷贝只复制指向某个对象的指针，而不复制对象自己，新旧对象仍是共享同一块内存；
• 深拷贝会另外创造一个如出一辙的对象，跟原对象不共享内存，修改新对象不会改到原对象；
• 区别：浅拷贝只复制对象的第一层属性、深拷贝能够对对象的属性进行递归复制。

let obj = {
  name: 'Yvette',
  age: 18,
  hobbies: ['reading', 'photography']
}
let obj1 = obj
let obj2 = Object.assign({}, obj)
let obj3 = JSON.parse(JSON.stringify(obj))

obj.name = 'Jack'
obj.hobbies.push('coding')
console.log(obj) //{ name: 'Jack', age: 18,hobbies: [ 'reading', 'photography', 'coding' ] }
console.log(obj1) //{ name: 'Jack', age: 18,hobbies: [ 'reading', 'photography', 'coding' ] }
console.log(obj2) //{ name: 'Yvette', age: 18,hobbies: [ 'reading', 'photography', 'coding' ] }
console.log(obj3) //{ name: 'Yvette', age: 18,hobbies: [ 'reading', 'photography' ] }
复制代码

从以上例子能够看出，当数据为引用数据类型时

1. 直接赋值属于浅拷贝
2. Object.assign，当数据第一层为基本数据类型时，新的对象和原对象互不影响，可是若是第一层的属性值是复杂数据类型，那么新对象和原对象的属性值其指向的是同一块内存地址。
3. JSON.parse(JSON.stringify(obj))可实现深拷贝

深拷贝的实现

1. JSON.parse(JSON.stringify(obj)) 但存在一些缺陷

• 对象的属性值是函数时，没法拷贝。
• 原型链上的属性没法拷贝
• 不能正确的处理 Date，RegExp 类型的数据
• 会忽略 undefined

2. 实现一个 deepClone 函数

• 若是是基本数据类型，直接返回
• 若是是 RegExp 或者 Date 类型，返回对应类型
• 若是是复杂数据类型，递归。
• 考虑循环引用的问题

function deepClone(obj, hash = new WeakMap()) {
  //递归拷贝
  if (obj instanceof RegExp) return new RegExp(obj)
  if (obj instanceof Date) return new Date(obj)
  if (obj === null || typeof obj !== 'object') {
    //若是不是复杂数据类型，直接返回
    return obj
  }
  if (hash.has(obj)) {
    return hash.get(obj)
  }
  /** * 若是obj是数组，那么 obj.constructor 是 [Function: Array] * 若是obj是对象，那么 obj.constructor 是 [Function: Object] */
  let t = new obj.constructor()
  hash.set(obj, t)
  for (let key in obj) {
    //递归
    if (obj.hasOwnProperty(key)) {
      //是不是自身的属性
      t[key] = deepClone(obj[key], hash)
    }
  }
  return t
}
复制代码

JavaScript