JavaScript深浅拷贝

1. 浅拷贝

首先浅拷贝和深拷贝只针对引用类型
浅拷贝:拷贝的是地址
如果是简单数据类型拷贝值,引用数据类型拷贝的是地址 (简单理解: 如果是单层对象,没问题,如果有多层就有问题)

2.深拷贝

首先浅拷贝和深拷贝只针对引用类型
深拷贝:拷贝的是对象,不是地址

3. 直接赋值和浅拷贝有什么区别?

直接赋值的方法,只要是对象,都会相互影响,因为是直接拷贝对
象栈里面的地址
浅拷贝如果是一层对象,不相互影响,如果出现多层对象拷贝还会
相互影响

4. 浅拷贝怎么理解?

拷贝对象之后,里面的属性值是简单数据类型直接拷贝值
如果属性值是引用数据类型则拷贝的是地址
在这里插入图片描述

<body>
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
  <script> 
    const obj = {
      sex: 'man',
      age: 18,
      family: { mom: 'Alice', dad: 'David', sis: 'Andy' },
      bels: ['clothes', 'shoes', 'room']
    }
    /* const Obj = {}
    Object.assign(Obj,obj) //assign方法实现浅拷贝*/
    /* const Obj={...obj} //展开运算符实现浅拷贝*/
    /*  const arr=Array.prototype.concat(obj.bels)  //数组原型对象concat方法实现数组浅拷贝*/
    /* const arr=[...obj.bels]  //展开运算符实现数组浅拷贝*/
    /* const Obj = structuredClone(obj)//structuredClone方法实现深拷贝 */
    /*  const Obj = JSON.parse(JSON.stringify(obj)) //使用JSON转换实现深拷贝
    虽然上面代码中的对象足够简单,可以序列化,但许多 JavaScript 对象根本不能序列化——例如,函数(带有闭包)、Symbol、在    HTML DOM API 中表示 HTML 元素的对象、递归数据以及许多其他情况。*/
    /* function deepCopy(newobj, oldobj) {
      for (let i in oldobj) {
        if (oldobj[i] instanceof Array) {
          newobj[i] = []
          deepCopy(newobj[i], oldobj[i])
        } else if (oldobj[i] instanceof Object) {
          newobj[i] = {}
          deepCopy(newobj[i], oldobj[i])
        } else {
          newobj[i] = oldobj[i]
        }
      }
    }
    deepCopy(Obj, obj) //使用递归实现深拷贝*/
    /* const Obj = _.cloneDeep(obj)//lodash.js库cloneDeep方法实现深拷贝 */
    Obj.bels[2] = 'pants'
    Obj.family.sis = 'Juli'
    console.log(Obj)
    console.log(obj)

  </script>
</body>
  • 6
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值