举例谈深克隆和浅克隆啦啦啦（面试必考哦）

最新推荐文章于 2023-01-09 20:34:10 发布

羊羊毛卷卷

最新推荐文章于 2023-01-09 20:34:10 发布

阅读量166

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_46470406/article/details/108331120

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了浅克隆和深克隆的概念，通过实例代码展示了两种克隆的区别。浅克隆在拷贝对象时，只复制基本数据类型，而引用类型仅复制引用。深克隆则会递归复制对象及其关联对象的所有内容。通过对比，揭示了两者看似相同实则不同的本质。

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

浅克隆

浅拷贝(Object类中的clone()方法)是指在拷贝对象时，对于基本数据类型的变量会重新复制一份，而对于引用类型的变量只是对引用进行拷贝。

首先克隆的步骤

先创建一个新的空对象
遍历原对象中的属性
为新对象强行添加该属性属性值也等于原对象的同名属性的值
返回新对象

请对照上述步骤来看一下代码举梨~

<script>
        var lilei={
            sname:"lilei",
            sage:"12"
        }
        function clone(oldObj){
            var newObj={};
            for(var key in oldObj){
                newObj[key]=oldObj[key];
            }
            return newObj
        }
        var lilei2=clone(lilei);
        console.log(lilei);
        console.log(lilei2)
    </script>

如果没有看懂上述代码也没关系啦~接着看

<script>
        // 原对象
        var lilei={
            sname:"lilei",
            sage:"12"
        }
        function clone(oldObj){
            // 创建一个空的新对象
            var newObj={};
            // 遍历就对象中的每一个属性值
            for(var key in oldObj){
                // 并且将旧对象属性的值赋值给新的对象
                newObj[key]=oldObj[key];
            }
            // 返回新对象
            return newObj
        }
        // 克隆一个新对象lilei2
        var lilei2=clone(lilei);
        console.log(lilei);
        console.log(lilei2);
    </script>

最后的输出结果是
在这里插入图片描述
看到这里你可能会想这不就是两个一摸一样的对象吗？？？NONONO！！
看这里哦~
通过判断两个对象

 console.log(lilei==lilei2);

在这里插入图片描述
他们只是长得像而已的双胞胎兄弟哦~~

深克隆

深拷贝(或叫深克隆) 则是对对象及该对象关联的对象内容，都会进行一份拷贝。

//深克隆
        function deepClone(oldObj){
            if(oldObj==null){
                return null;
            }
            if(oldObj!=="object"){
                return Object;
            }
            var newObj=Array.isArray(oldObj)?[]:{};
            for(var key in oldObj){
                newObj[key]=oldObj[key];
            }
            return newObj;
        }
        var lilei={
            sname:"lilei",
            sage:12
        }
        var arr=[1,1,1,1];
        var a=1;
        var lilei2=deepClone(lilei);
        console.log(lilei2);
        var arr2=deepClone(arr);
        console.log(arr2)
        var a2=deepClone(a);
        console.log(a2);

运行结果是
在这里插入图片描述