今日学习笔记：浅拷贝和深拷贝!!!

最新推荐文章于 2024-09-16 08:47:17 发布

永远的净心

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量78

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_37150764/article/details/109215178

版权

本文探讨了JavaScript中的浅拷贝和深拷贝概念，详细解释了两者的区别。通过实例分析，阐述了浅拷贝仅复制对象的引用，而深拷贝会创建对象的完全副本，包括其所有嵌套的对象和数组。了解这两种拷贝方式对于解决数据复制和修改问题至关重要。

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

浅拷贝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 type="text/javascript">
      //拷贝/复制/克隆 clone
      var person1 = {
        name: '张三',
        age: 18,
        sex: 'male',
        height: 180,
        weight: 140,
        son: {
            first: 'Jenney',
            second: 'Lucy',
            Third: 'Jone'
        },
        arr: []
      }
      
      var person2 = {};
      for(var key in person1){
          person2[key] = person1[key];
      }
      person2.name = '李四';
      person2.son.forth = 'Ben';
      console.log(person1,person2);
    </script>
</body>
</html>

浅拷贝2

<!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 type="text/javascript">
      //拷贝/复制/克隆 clone
      var person1 = {
        name: '张三',
        age: 18,
        sex: 'male',
        height: 180,
        weight: 140,
        son: {
            first: 'Jenney',
            second: 'Lucy',
            Third: 'Jone'
        },
        arr: []
      }
      
      var person2 = clone(person1);
      person2.name = '李四';
      person2.son.forth = 'Ben';
      console.log(person1,person2);

      function clone(origin, target){
          var tar = target || {};
          for(var key in origin){
              if(origin.hasOwnProperty(key)){
                  tar[key] = origin[key];
              }
          }
          return tar;
      }
    </script>
</body>
</html>

深拷贝

<!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 type="text/javascript">
      //拷贝/复制/克隆 clone
      var person1 = {
        name: '张三',
        age: 18,
        sex: 'male',
        height: 180,
        weight: 140,
        children: {
        first:{
            name: '张小一',
            age: 13
        },
        second:{
            name: '张小二',
            age: 7
        },
        third:{
            name: '张小三',
            age: 3
        }
        },
        car: ['Benz', 'Mazda']
      }
      
      var person2 = deepClone(person1);
      console.log(person2);
      person2.name = '李四';
      person2.children.forth = {
          name: '张小四',
          age: 1
      };
      console.log(person1,person2);
  
      function deepClone(origin, target){
          var target = target || {},
              toStr = Object.prototype.toString,
              arrType = '[object Array]';
          for(var key in origin){
              if(origin.hasOwnProperty(key)){
                  if(typeof(origin[key]) === 'object' && origin[key] !== null){
                      if(toStr.call(origin[key]) === arrType){
                          target[key] = [];
                      }else{
                          target[key] = {};
                      }
                      deepClone(origin[key], target[key]);
                  }else{
                    target[key] = origin[key];
                  }    
              }
          }
          return target;
      }
    </script>
</body>
</html>