js深拷贝浅拷贝

朱雀 2021-08-31 14:35 484阅读 0赞

<!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>
      
    </body>
    <script>
      // 在JS中，数据类型分为基本数据类型和引用数据类型两种，对于基本数据类型来说，它的值直接存储在栈内存中，
      // 而对于引用类型来说，它在栈内存中仅仅存储了一个引用，而真正的数据存储在堆内存中
    
    
      // 当基本类型实现浅拷贝，存在栈内存中，那么相互独立，互不影响。
      // 当复杂类型实现浅拷贝，新对象与旧对象仍然同时指向堆内存的同一属性，互不独立，相互影响。
    
      // 基本数据类型
      var a = "1";
      var b = a;
      a = 2;
      console.log(b);
    
    
      // 引用数据类型
      var arr = [1,2,3];
      var newArr = copy(arr);  //[1,2,3]
      newArr.push(4); //[1,2,3,4]
      console.log(arr); //[1,2,3,4]
      // 当我们创建arr数组时，arr被分配到了堆内存中，在栈内存留下可以寻找到的指针，
      // 也就是说当我们创建新数组newArr时，赋予newArr的是arr在栈中的地址（指针），
      // 其实仍与旧数组arr共享同一个内存，所以修改新数组newArr后，旧数组arr也会被修改
    
    
      // 深拷贝
      // 它可以将复杂类型的数据相互独立出来，互不影响
      // 深拷贝不会拷贝引用类型的引用，而是将引用类型的值全部拷贝一份，形成一个新的引用类型，
      // 这样就不会发生引用错乱的问题，使得我们可以多次使用同样的数据，而不用担心数据之间会起冲突
    
      // 1、
      function copy(obj) { 
        if(typeof obj == "object") {  //判断是否复杂类型
           var result = obj.constructor == Array ? [] : { };//判断数组类型或是object，数组即result=[]，object即result={}
            for(let i in obj) { 
                result[i] = typeof obj[i] == "object" ? copy(obj[i]) : obj[i]//判断数据每一项是否是object
            }
        } else { 
            var result = obj //基本类型直接拷贝
        }
      return result;
    }
     // 2、
    function deepClone(target) { 
        // 定义一个变量
        let result;
        // 如果当前需要深拷贝的是一个对象的话
        if (typeof target === 'object') { 
        // 如果是一个数组的话
            if (Array.isArray(target)) { 
                result = []; // 将result赋值为一个数组，并且执行遍历
                for (let i in target) { 
                    // 递归克隆数组中的每一项
                    result.push(deepClone(target[i]))
                }
             // 判断如果当前的值是null的话；直接赋值为null
            } else if(target===null) { 
                result = null;
             // 判断如果当前的值是一个RegExp对象的话，直接赋值 
            } else if(target.constructor===RegExp){ 
                result = target;
            }else { 
             // 否则是普通对象，直接for in循环，递归赋值对象的所有值
                result = { };
                for (let i in target) { 
                    result[i] = deepClone(target[i]);
                }
            }
         // 如果不是对象的话，就是基本数据类型，那么直接赋值
        } else { 
            result = target;
        }
         // 返回最终结果
        return result;
    }
    </script>
    </html>