ES6--深度克隆（深拷贝和浅拷贝）

傷城~ 2022-12-06 12:38 714阅读 0赞

拷贝数据：  
基本数据类型：拷贝后会生成一份新的数据，修改拷贝以后的数据不会影响原数据  
对象/数组  
拷贝后不会生成新的数据，而是拷贝引用，修改拷贝后的数据会影响原数据  
拷贝数据的方法：  
1.直接赋值给一个变量：浅拷贝 修改拷贝以后的数据会影响原数据  
2.Object.assign():浅拷贝  
3.Array.prototype.concat():浅拷贝,可用于合并数组，如果传值。  
4.Array.prototype.slice(startindex,endindex)：浅拷贝  
5.JSON.parse(JSON.stringify()):深拷贝，拷贝的数据不能有函数  
例：

let obj = {name:'kobe'};
         let obj2 = Object.assign(obj);
         console.log(obj2);
         obj.name = 'xz';
         console.log(obj);
         let arr = [1,3,{name:'xz'}];
         let testArr = [2,4];
         let arr2 = arr.concat();
        //  let arr2 = arr.concat(testArr);
        arr2[1] = 'a';//对原数组没有影响
        arr[2].username = 'wade';//对原数组有影响
        console.log(arr2,arr);
        let arr3 = arr.slice();
        arr3[2].username = 'wt';//会影响原数组
        console.log(arr3,arr);
        let arr4 = JSON.parse(JSON.stringify(arr));
        //JSON.stringify();//将字符串转换为JSON对象
        console.log(arr4);
        arr4[2].name = 'wangting';
        console.log(arr);
        /*
            如何实现深度拷贝
            拷贝的数据里有对象或数组
            拷贝的数据里不能有对象/数组
            即使有对象/数组可以继续遍历对象，数组拿到里边每一项值，一直拿到的是基本数据类型，然后再去复制，就是深度拷贝
            解决：
            如何判断数据类型 arr -->Array null--->null
            typeof返回的数据类型：String,Number,Boolean,Undefined,Object,Function
            Object.prototype.toString.call(obj)
        */ 
        let result = 'abcd';
        result=null;
        result=[1,3];
        console.log(Object.prototype.toString.call(result).slice(8,-1));//-1代表包含最后一个位
        //for in循环 对象（属性名）数组（下标）
        let obj3 = {username:'xiaozhan',age:29};
        for(let i in obj3){
            console.log(i,obj3[i]);
        }
        let arr5 = [1,3,'abc'];
        for(let i in arr5){
            console.log(i);
        }
        //定义检测数据类型的功能函数
        function checkedTYpe(target){
            return Object.prototype.toString.call(target).slice(8,-1);
        }
        //实现深度克隆-->对象/数组
        function clone(target){
            //判断拷贝的数据类型
            //初始化变量的result，成为最终克隆的数据
            let result;
            let targetType = checkedTYpe(target);//这里的result没有赋值
            if(targetType==='Object'){
                result={};
            }else if(targetType==='Array'){
                result=[];
            }else{
                return target;
            }
            //遍历目标数据
            for(let i in target){
                //获取遍历数据结构的每一项值
                let value = target[i];
                //判断目标结构里的每一项值是否存在对象/数组
                if(checkedTYpe(value)==='Object'||checkedTYpe(value)==='Array'){
                    //继续遍历获取到的value值
                      result[i] = clone(value);
                }else{
                    result[i] = value;
                }
    
            }
            return result;
        }
        let arr6 = [1,2,{name:'xi'}];
        let arr7 = clone(arr6);
        console.log(arr7);
        arr7[2].name='wt';
        console.log(arr6,arr7);
        let obj5={name:'xiao'};
        let obj6 = clone(obj5);
        obj6.name = 'wang';
        console.log(obj5,obj6);

发表评论取消回复

表情：

评论列表（有 0 条评论，714人围观）

还没有评论，来说两句吧...

相关阅读