Javascript实现深拷贝的方式

 

• 深拷贝：在堆内存中重新开辟一个存储空间，完全克隆一个一模一样的对象；

• 浅拷贝：不在堆内存中重新开辟空间，只复制栈内存中的引用地址。本质上两个对象（数组）依然指向同一块存储空。

 01、递归方式（推荐，项目中最安全最常用）

        使用递归的方式进行对象（数组）的深拷贝

//函数拷贝
const copyObj = (obj = {}) => {            //变量先置空
    let newobj = null;  

    //判断是否需要继续进行递归
    if (typeof (obj) == 'object' && obj !== null) {
        newobj = obj instanceof Array ? [] : {};                //进行下一层递归克隆
        for (var i in obj) {
            newobj[i] = copyObj(obj[i])
        }                //如果不是对象直接赋值
    } else newobj = obj;            
    return newobj;    
}

//函數使用
const newObj = copyObj(obj); //这样就完成了一个对象的递归拷贝

·02、JSON.stringify() ；(这个不推荐使用，有坑)

        普通的对象也可以进行深拷贝，但是！！！当对象内容项为number,string.boolean的时候，是没有什么问题的。但是，如果对象内容项为undefined,null,Date,RegExp,function，error的时候。使用JSON.stringify()进行拷贝就会出问题了。

let newObj = JSON.parse(JSON.stringify(obj));

03、jquery的extend()方法进行深拷贝（推荐在JQ中使用）

        这个方法仅适用于JQuery构建的项目。JQuery自身携带的extend()方法可以进行深拷贝，不用自己写递归也不用引入第三方库还没什么坑。

在JQuery项目中的使用方式：

let obj = {  
    a: {      
        c: 2,      
        d: [1, 3, 5],      
        e:'阿巴阿巴'
       },    
     b: 4
}

//拷贝完成obj.b = 20;console.log(newObj.b); //输出 4 
let newObj= $.extend(true, {}, obj1);