js深拷贝和浅拷贝的实现

1.JSON.stringify+JSON.parse实现深拷贝

const obj = {
  id: 1,
  name: 'Suk',
  hobby: [
    { name: 'basketball' },
    { name: 'football' },
    { name: 'golf' },
    { name: 'baseball' }
  ]
}
// 先用JSON.stringify()将obj序列化成字符串,然后再用JSON.parse()解析成对象,这样得到的对象才是真正意义上的深拷贝
const copyObj = JSON.parse(JSON.stringify(obj))
console.log(copyObj.hobby === obj.hobby) // false

2.Object.assign实现浅拷贝

const obj = {
  id: 1,
  name: 'Suk',
  hobby: [
    { name: 'basketball' },
    { name: 'football' },
    { name: 'golf' },
    { name: 'baseball' }
  ]
}
const copyObj = {}
// 使用Object.assign()进行拷贝只是拷贝了当前第一层的属性,如果是基本类型就直接复制过去,如果是引用数据类型那么拷贝的还是原来的对象的属性的引用,拷贝后的引用还是指向的之前的
Object.assign(copyObj, obj)
console.log(copyObj.hobby === obj.hobby) // true

3.手动封装函数递归实现深拷贝

function deepCopy<T extends Record<string, any>>(obj: T): T | T[] {
  // 如果是obj是一个原始值或者null 则不再递归拷贝直接返回
  if (typeof obj !== 'object' || obj === null) {
    return obj
  }
  // 如果是一个数组则将子元素进行递归拷贝
  if (Array.isArray(obj)) {
    return obj.map(deepCopy)
  }

  const copy = {} as Record<string, any>
  // 遍历对象key进行拷贝
  Object.keys(obj).forEach((key) => {
    copy[key] = deepCopy(obj[key])
  })

  return copy as T
}
const obj = {
    id: 1,
    name: 'Suk',
    hobby: [
        { name: 'basketball' },
        { name: 'football' },
        { name: 'golf' },
        { name: 'baseball' }
    ]
}
const copyObj = deepClone(obj);
console.log(obj.hobby === copyObj.hobby) // false

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值