手动实现一个深拷贝

为何要用深拷贝？

小伙伴们都知道，js中的对象属于引用类型，单纯的用等号赋值，其实复制的是引用地址，真正指向的仍是堆内存中同一个值，当一个值的内部属性变化时，另外一个值因为指向的是堆内存中的同一个值，因此也会发生变化。这每每是咱们不想要的结果，我也在项目中由于这个吃过大亏，因此一块儿来讨论讨论吧！

如何手动实现一个深拷贝？

方法1：JSON.stringify ，JSON.parse

经过JSON.stringify,JSON.parse能够实现深拷贝，可是有个坑得注意下，在序列化JavaScript对象时，全部函数和原型成员会被有意忽略。看下面这个案例：

var a = {
    name:"西瓜",
    run:function(){
        console.log(123)
    }
}
console.log(JSON.parse(JSON.stringify(a)));
复制代码

能够看出，在拷贝的过程当中,对象中的 run方法不见了。

方法2：递归

话很少说，直接上代码：

//主入口函数
function deepCopy(obj){
    if(typeof obj === "object"){
        //是一个数组
        if(Array.isArray(obj)){
            return copyArray(obj);
        }else{
            //是一个对象
            return copyObj(obj);
        }
    }
}

//若是是对象类型的，执行该函数
function copyObj(obj){
    var newObj = {};
    for(let key in obj){
        if(typeof obj[key] === "object"){
			//obj[key]仍是属于object类型的话，递归执行deepCopy
            newObj[key] = deepCopy(obj[key]);
        }else{
            newObj[key] = obj[key];
        }
    }
    return newObj;
}

//若是是数组类型类型的，执行该函数
function copyArray(array){
    var newArr = [];
    array.forEach((item,index)=>{
		//item仍是属于object类型的话，递归执行deepCopy
        if(typeof item === "object"){
            newArr.push(deepCopy(item));
        }else{
            newArr.push(item);
        }
    });
    return newArr;
}
//测试
var testObj = [{
        name:"西瓜",
        info:{
            age:10,
            adress:"杭州"
        }
    },
    "哈哈哈哈哈",
    {
        run:function(){
            console.log(123)
        }
    }
];

var deepObj = deepCopy(testObj);

testObj[1] = "我改变了数组里面的一个值";

console.log(testObj);

console.log(deepObj);
复制代码

运行结果以下：

结果中看到，deepObj是使用深拷贝函数后获得的结果，在这以后去修改testObj的值,deepObj的值并无发生改变。说明深拷贝成功啦！ ###总结 在实现深拷贝的过程当中，也能够复习一下递归的知识，仍是挺好的！小伙伴们也去试试吧！