• 深拷贝和浅拷贝

    一、深浅拷贝是什么？

    首先我们要明白一点，js中数据类型分为：
    基本数据类型: Number, String, Boolean, Null, Undefined, Symbol
    引用数据类型: Object ，Array , Function

    对于引用数据 类型才有深浅拷贝的说法

    1. 浅拷贝（只是拷贝了数值，或者说只是拷贝了一层数据）

    代码示例1：通过Object.assign()实现

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let obj = {
      name:'李白',
      age: 99,
      hobby:['足球','羽毛球'],
      family:{
        baby:'李华',
        father:'刘星'
      }
    }
    let params = Object.assign({},obj) // 得到新对象
    params.family.baby = '张巡'
    console.log('params',params);
    console.log('obj',obj);
  </script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    结果图：
    在这里插入图片描述

    这里明显可以看到，拷贝得到新对象params改变family的baby属性会对原对象obj的family的baby属性产生影响，就是因为他拷贝的时候复制的是原来obj里面family对象的引用地址，所以改变family的属性之后会相互影响。

    代码示例2：通过es6的解构赋值也可以实现浅拷贝

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let obj = {
      name:'李白',
      age: 99,
      hobby:['足球','羽毛球'],
      family:{
        baby:'李华',
        father:'刘星'
      }
    }
    let params = {...obj} // 解构赋值取值拿到新对象
  </script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    总结 ： 通过Object.assign()或者解构赋值可以实现浅拷贝

    2. 深拷贝（复制变量值，对于非基本类型的变量，则递归至基本类型变量后，再复制。 深拷贝后的对象与原来的对象是完全隔离的，互不影响，对一个对象的修改并不会影响另一个对象。）

    • 代码实现1：通过递归函数
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let obj = {
      name:'李白',
      age: 99,
      hobby:['足球','羽毛球'],
      family:{
        baby:'李华',
        father:'刘星'
      }
    }
    let params = {}
    // 拷贝函数
    function deepCopy(newObj,oldObj){ // newObj：新数据,oldObj：旧数据
      for(let k in oldObj){
        if(oldObj[k] instanceof Array){ // 属性为数组
          newObj[k] = [] // newObj[k] --- > params.hobby
          deepCopy(newObj[k],oldObj[k])
        }else if(oldObj[k] instanceof Object){// 属性为对象
          newObj[k] = {}
          deepCopy(newObj[k],oldObj[k])
        }else{ //属性为基本类型
          newObj[k] = oldObj[k]
        }
      }
    }
    deepCopy(params,obj) // 调用函数
    params.hobby[0] = '篮球'
    params.family.baby = '张明'
    console.log('params',params);
    console.log('obj',obj);
  </script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

    结果图：
    在这里插入图片描述
    可以看到我们在params对象里面改变hobby的内容，改变family的baby属性不会对obj对象里面的内容有影响。

    • 代码实现2：通过js库的lodash里面的_.cloneDeep()

    lodash官网地址

    lodash.js插件下载地址

    首先引入lodash插件

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 引入插件 -->
  <script src="../lodash.min.js"></script>
  <script>
    let obj = {
      name:'李白',
      age: 99,
      hobby:['足球','羽毛球'],
      family:{
        baby:'李华',
        father:'刘星'
      }
    }
    let deep = _.cloneDeep(obj) // 实现深拷贝
    deep.family.father = '小九九'
    console.log('deep:',deep);
    console.log('obj:',obj);
  </script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 代码实现3：利用JSON字符串转换
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let obj = {
      name:'李白',
      age: 99,
      hobby:['足球','羽毛球'],
      family:{
        baby:'李华',
        father:'刘星'
      }
    }
    let str = JSON.stringify(obj)
    let params = JSON.parse(str) // 获取新对象
    params.family.baby = '赵鑫'
    console.log('params',params);
    console.log('obj',obj);
  </script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    总结：

    • 递归函数
    • js库的lodash里面的_.cloneDeep()
    • JSON字符串转换*
  • 相关阅读:
    three.js相机调用reset方法复原但无法完全复原
    昨日阅读量898
    IC基础——FIFO
    我的创作纪念日
    Redis安装及其配置文件修改
    开源IM项目OpenIM单聊及万人群压测报告
    mybatis-plus实现逻辑删除（详细！)
    设计模式总结
    文心一言 VS 讯飞星火 VS chatgpt （203）-- 算法导论15.3 2题
    C# 线程本地存储 为什么线程间值不一样
  • 原文地址：https://blog.csdn.net/qq_45331969/article/details/133930933