对象的深浅克隆

93 阅读1分钟

对象是引用类型值

因为对象是引用类型值,所以不能用 var obj2 = obj1 这样的语法克隆一个对象。

使用 == 或 === 进行对象的比较时,比较的是他们是否为内存中的一个对象,而不是比较值是否相同

案例演示说明

 <script>
        // 例1
        var obj1 = {
            a:1,
            b:2,
            c:3
        };
        var obj2 = {
            a:1,
            b:2,
            c:3
        };

        console.log(obj1 == obj2); //false
        console.log(obj1 === obj2); //false

        // 空对象
        console.log({} == {});  //false
        console.log({} === {});  //false


        // 例2
        var obj3 = {
            a:10,
        };

        var obj4 = obj3;

        obj3.a++;

        console.log(obj4.a); //a:11
    </script>

对象的浅克隆

浅克隆就是只克隆对象的“表层”,如果对象的某些属性值又是引用类型值,则不进一步克隆他们,只传递它们的引用

使用 for...in...循环即可实现对象的浅克隆

演示说明

<script>
        var obj1 = {
            a:1,
            b:2,
            c:[44,55,66]
        };
        // 实现浅克隆
        var obj2 = {};
        // 每遍历一个k属性,就给obj2也添加一个同名的k属性
        // 值和obj1的k属性值相同
        for(var k in obj1){
            obj2[k]=obj1[k];
        }
        // 浅克隆不能将 引用类型值 完全分开
        obj1.c.push(77);
        console.log(obj2);
    </script>

对象的深克隆

深克隆 克隆对象的全貌,无论对象的属性值是否又是引用类型值,都能将他们实现克隆

和数组的深克隆类似,对象的深克隆需要使用递归

面试时经常会考察克隆算法,必须掌握

深克隆代码

 function deepClone(o){
        //    分类判断类型值
             // 判断o是对象还是数组
           
         // Array的typeof值也是 object, 所以必须将遍历数组放在前面
         
            if (Array.isArray(o)){
                var result=[];
                for(var i=0; i<o.length;i++){
                    result.push(deepClone(o[i]));
                }

            }
            else if (typeof o == 'object'){
                var result = {};
                for(var k in o){
                    result[k]=deepClone(o[k]);
                }
            }
            else{
                var result = o;
            }
            return result;
       }