js深克隆与浅克隆

定义:

浅克隆: 克隆对象的一层属性, 如果对象还有对象的话,里面的对象没有进行克隆,只是把地址给了别人。也可以理解为只是简单的克隆了躯体,但是没有得到其灵魂;

深克隆:克隆对象的多层属性,对象里面还有对象的话,还会继续拷贝;例如:JSON.parse(JSON.stringfy());

还有一种是直接赋值,比浅克隆还要糟糕;躯体都没有复制完整;

区别:

区别 基本数据类型 复杂数据类型
深克隆 改变新数据不会影响原数据 改变新数据不会影响原数据
浅克隆 改变新数据不会影响原数据 改变新数据会影响原数据
赋值 改变新数据会影响原数据 改变新数据会影响原数据

深克隆方法:

JSON.parse(JSON.stringfy( ... ));

只能对单层数据有效,若有多层数据嵌套,里面的数据不能被深拷贝;如:let obj = { name:'sss',age:18,other:{name:'sss2'}};

克隆对象的多层属性;

 var dfg = {
            house: "洋房",
            money: 10000000000000000,
            // car: "宝马",
            car: {
                name: "名爵",
                color: "red"
            }
        }
        // 封装以上代码
        // 作用:传一个对象,就可以克隆出来一个新对象
        function copy(obj){
            // 1. 新创建一个对象
            var newObj = {};
            // 2. 把obj遍历一下,把成员添加给新对象
            for(var k in obj){
                // console.log(obj[k]); // 对象中的值
                // 以下代码的问题:
                //  不管obj[k]的值是复杂的还是简单数据类型,都是直接赋值了
                // newObj[k] = obj[k];
                // 需要进行判断:
                //  1. 如果是简单数据类型 ==> 直接赋值
                //  2. 如果是复杂数据类型 ==> 先把复杂数据克隆一份呢,把克隆出来的赋值过去
                /*if(typeof obj[k] === "object"){
                    // 复杂数据类型
                    // var newCar = copy(obj[k]);
                    // console.log("复杂数据类型", obj[k]);
                    // console.log(newCar);
                    // console.log( newCar === obj[k] );
                    // 把新的对象添加到nnewObj中
                    newObj[k] = copy(obj[k]);
                }else{
                    // 简单数据类型
                    newObj[k] = obj[k];
                }*/
                // 三元简化以上代码
                newObj[k] = typeof obj[k] === "object" ? copy(obj[k]) : obj[k];
            }
            // 3. 返回新对象
            return newObj;
        }
        var dfg2 = copy(dfg);
        console.log(dfg2);

 

posted @ 2020-12-23 14:39  大熊在这里  阅读(286)  评论(0)    收藏  举报