深拷贝and浅拷贝

最新推荐文章于 2024-11-08 16:09:18 发布

不取名字的码农。

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量60

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/adios_0403/article/details/132000097

版权

浅拷贝

首先浅拷贝和深拷贝只针对引用类型
浅拷贝：拷贝的是地址
常见方法：

拷贝对象：Object.assgin() / 展开运算符 {…obj} 拷贝对象
拷贝数组：Array.prototype.concat() 或者 […arr]

如果是简单数据类型拷贝值，引用数据类型拷贝的是地址

<script>
        // const obj = {
        //     uname: 'zhangsan',
        //     age: 18
        // }
        // const o = { ...obj }
        // console.log(o) // {uname: 'zhangsan', age: 18}
        // o.age = 20
        // console.log(o) // {uname: 'zhangsan', age: 20}
        // console.log(obj) // {uname: 'zhangsan', age: 18}

        // const o = {}
        // Object.assign(o, obj)
        // console.log(o) // {uname: 'zhangsan', age: 18}
        // o.age = 20
        // console.log(o) // {uname: 'zhangsan', age: 20}
        // console.log(obj) // {uname: 'zhangsan', age: 18}


        const obj = {
            uname: 'zhangsan',
            age: 18,
            familly: {
                baby: '小zhangsan'
            }
        }
        const o = {}
        Object.assign(o, obj)
        console.log(o) // {uname: 'zhangsan',familly: {baby: '老zhangsan'}, age: 18}
        o.age = 20
        o.familly.baby = '老zhangsan'
        console.log(o) // {uname: 'zhangsan',familly: {baby: '老zhangsan'}, age: 20}
        console.log(obj) // {uname: 'zhangsan',familly: {baby: '老zhangsan'}, age: 18}
    </script>

深拷贝

首先浅拷贝和深拷贝只针对引用类型
深拷贝：拷贝的是对象，不是地址
常见方法：

通过递归实现深拷贝
lodash/cloneDeep
通过JSON.stringify()实现

递归实现深拷贝

函数递归：
如果一个函数在内部可以调用其本身，那么这个函数就是递归函数

简单理解：函数内部自己调用自己，这个函数就是递归函数
递归函数的作用就是循环效果类似
由于递归很容易发生"栈溢出"错误（stack overflow），所以必须要加退出条件 return

<body>
  <script>
    const obj = {
      uname: 'baby',
      age: 18,
      hobby: ['乒乓球', '足球'],
      family: {
        baby: '小baby'
      }
    }
    const o = {}
    // 拷贝函数
    function deepCopy(newObj, oldObj) {
      debugger
      for (let k in oldObj) {
        // 处理数组的问题  一定先写数组 在写 对象 不能颠倒
        if (oldObj[k] instanceof Array) {
          newObj[k] = []
          //  newObj[k] 接收 []  hobby
          //  oldObj[k]   ['乒乓球', '足球']
          deepCopy(newObj[k], oldObj[k])
        } else if (oldObj[k] instanceof Object) {
          newObj[k] = {}
          deepCopy(newObj[k], oldObj[k])
        }
        else {
          //  k  属性名 uname age    oldObj[k]  属性值  18
          // newObj[k]  === o.uname  给新对象添加属性
          newObj[k] = oldObj[k]
        }
      }
    }
    deepCopy(o, obj) // 函数调用  两个参数 o 新对象  obj 旧对象
    console.log(o)
    o.age = 20
    o.hobby[0] = '篮球'
    o.family.baby = '老baby'
    console.log(obj)
    console.log([1, 23] instanceof Object) // true
  </script>
</body>

js库lodash里面cloneDeep内部实现了深拷贝

<!-- 先引用 -->
    <script src="./lodash.min.js"></script>
    <script>
        const obj = {
            uname: 'zhangsan',
            age: 18,
            hobby: ['乒乓球', '足球'],
            family: {
                baby: '小baby'
            }
        }
        // lodash 深拷贝 _.cloneDeep(拷贝对象)
        const o = _.cloneDeep(obj)
        console.log(o)
        o.family.baby = '老baby'
        console.log(obj)
    </script>

JSON序列化

<script>
        const obj = {
            uname: 'pink',
            age: 18,
            hobby: ['乒乓球', '足球'],
            family: {
                baby: '小baby'
            }
        }
        // 把对象转换为 JSON 字符串
        console.log(JSON.stringify(obj))
        const o = JSON.parse(JSON.stringify(obj))
        console.log(o)
        o.family.baby = '123'
        console.log(obj)
    </script>