js深拷贝浅拷贝-阿里云开发者社区

js深拷贝浅拷贝

2022-05-05 108

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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深拷贝浅拷贝

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

js深拷贝浅拷贝

热门文章

最新文章

相关课程

相关电子书

相关实验场景