1. 90前端首页
  2. 前端开发
  3. JavaScript

浅谈JavaScript的 深拷贝和浅拷贝

深拷贝

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

浅拷贝

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

区别

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

1、浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存;
2、深拷贝会另外创造一个一模一样的对象,跟原对象不共享内存,修改新对象不会改到原对象;
3、区别:浅拷贝只复制对象的第一层属性、深拷贝可以对对象的属性进行递归复制。

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
}

本文来自网络整理,转载请注明原出处:https://segmentfault.com/a/1190000021608363

展开阅读全文

发表评论

登录后才能评论