JavaScript深浅拷贝

森哥呢

已于 2024-04-16 17:11:52 修改

阅读量200

点赞数 6

分类专栏：前端学习文章标签： javascript 前端开发语言

于 2024-04-16 11:11:08 首次发布

本文链接：https://blog.csdn.net/weixin_46041602/article/details/137813153

版权

前端学习专栏收录该内容

24 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中的浅拷贝和深拷贝概念，指出它们只针对引用类型，浅拷贝拷贝地址而深拷贝拷贝对象。还对比了直接赋值与浅拷贝的区别，并提供了几种实现浅拷贝和深拷贝的方法，如lodash.js的`_.cloneDeep`和JSON转换。

摘要由CSDN通过智能技术生成

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>