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

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

拷贝数据：
基本数据类型：拷贝后会生成一份新的数据，修改拷贝以后的数据不会影响原数据
对象/数组
拷贝后不会生成新的数据，而是拷贝引用，修改拷贝后的数据会影响原数据
拷贝数据的方法：
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);