前端手写(三)——手写深拷贝

x33g5p2x  于2022-03-28 转载在 其他  
字(0.9k)|赞(0)|评价(0)|浏览(502)

一、写在前面
深拷贝就是对对象的深度拷贝,假如我们对象中的字段值任然是对象,如果使用浅拷贝,则只能拷贝对象的地址。实现深拷贝存在三种方法:
1、使用JSON.stringifyJSON.parse方法
2、手写一个深拷贝函数。
3、使用第三方库lodash
下面我们将详细总结一下第一种和第二种。
二、JSON.stringify和JSON.parse方法

const obj = {
  name: 'Jack',
  address: {
    x: 100,
    y: 200
  }
}
let copyObj = JSON.parse(JSON.stringify(obj))
console.log(copyObj)    //{ name: 'Jack', address: { x: 100, y: 200 } }
console.log(copyObj.address === obj.address)  //false

三、手写深拷贝函数

function deepCopy(obj, cache = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') return obj //原始值
  if (obj instanceof Date) return new Date(obj) //日期值
  if (obj instanceof RegExp) return new RegExp(obj) //正则

  if (cache.has(obj)) return cache.get(obj) //防止循环引用情况
  let copyObj = new obj.constructor() //创建一个和obj类型一样的对象
  cache.set(obj, copyObj) //放入缓存中
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      copyObj[key] = deepCopy(obj[key], cache)
    }
  }
  return copyObj
}

const obj = {
  name: 'Jack',
  address: {
    x: 100,
    y: 200
  }
} 
obj.a = obj
let copyObj = deepCopy(obj)
console.log(copyObj)
console.log(copyObj.address === obj.address)  //false

相关文章