js深拷贝浅拷贝

<!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>

你可能感兴趣的:(原生js)