搜奇网-搜索天下奇闻,挖掘全球趣事!CTRL+D收藏本站    您好!欢迎来到www.souqi366.com

www.souqi366.com

首页 > 宇宙探秘/ 正文

什么是JavaScript中的浅层拷贝和深层拷贝?

2021-01-09 14:39:07 宇宙探秘

    JavaScript是一种高级的,动态类型化的客户端脚本语言。JavaScript为静态HTML页面添加了很多功能。像大多数其他编程语言一样,JavaScript允许支持深层复制和浅层复制的概念。浅层拷贝:当使用赋值运算符将参考变量复制到新的参考变量中时,将创建所引用对象的浅表副本。简而言之,引用变量主要存储它引用的对象的地址。为新参考变量分配旧参考变量的值后,将存储在旧参考变量中的地址复制到新参考变量中。这意味着旧参考变量和新参考变量都指向内存中的同一对象。如果对象的状态通过任何参考变量发生变化,则两者都会反映出来。让我们通过一个例子来更好地理解它。例子代码:

    varemployee={eid:"E102",ename:"Jack",eaddress:"NewYork",salary:50000}console.log("Employee=>",employee);varnewEmployee=employee;//Shallowcopyconsole.log("NewEmployee=>",newEmployee);console.log("---------Aftermodification----------");newEmployee.ename="Beck";console.log("Employee=>",employee);console.log("NewEmployee=>",newEmployee);//Nameoftheemployeeaswellas//newEmployeeischanged.


    输出:


    说明:从上面的示例中可以看出,当newEmployee的名称被修改时,它也反映在旧的employee对象上。这可能会导致数据不一致。这称为浅拷贝。新创建的对象与旧对象具有相同的内存地址。


    因此,对它们中的任何一个所做的任何更改都会更改两者的属性。为解决此问题,使用了深拷贝。如果将其中一个从内存中删除,则另一个将不复存在。从某种意义上说,这两个对象是相互依存的。


    深层拷贝:与浅层拷贝不同,深层拷贝会复制旧对象的所有成员,为新对象分配单独的内存位置,然后将复制的成员分配给新对象。


    这样,两个对象彼此独立,并且在对任何一个对象进行任何修改的情况下,另一个对象均不受影响。


    同样,如果删除了其中一个对象,则另一个仍保留在内存中。现在,要在JavaScript中创建对象的深层副本,我们使用JSON.parse()和JSON.stringify()方法。让我们以一个例子来更好地理解它。


    例子代码:


    varemployee={eid:"E102",ename:"Jack",eaddress:"NewYork",salary:50000}console.log("=========DeepCopy========");varnewEmployee=JSON.parse(JSON.stringify(employee));console.log("Employee=>",employee);console.log("NewEmployee=>",newEmployee);console.log("---------Aftermodification---------");newEmployee.ename="Beck";newEmployee.salary=70000;console.log("Employee=>",employee);console.log("NewEmployee=>",newEmployee);


    输出:


    说明:在这里,新对象是使用JavaScript的JSON.parse()和JSON.stringify()方法创建的。JSON.stringify()将JavaScript对象作为参数,然后将其转换为JSON字符串。


    将此JSON字符串传递给JSON.parse()方法,然后将其转换为JavaScript对象。


    当对象较小且具有可序列化的属性时,此方法很有用。但是,如果对象很大并且包含某些不可序列化的属性,则存在数据丢失的风险。


    特别是如果对象包含方法,则JSON.stringify()将失败,因为方法不可序列化。有更好的方法可以深度克隆其中的一种,即Lodash,它也允许克隆方法。


    Lodash到DeepCopy:Lodash是一个JavaScript库,提供了多个实用程序功能,而Lodash库中最常用的功能之一是cloneDeep()方法。此方法有助于深度克隆对象,还可以克隆JSON.stringify()方法的局限性,即不可序列化的属性。


    代码:


    constlodash=require("lodash");varemployee={eid:"E102",ename:"Jack",eaddress:"NewYork",salary:50000,details:function(){return"EmployeeName:"+this.ename+"-->Salary:"+this.salary;}}vardeepCopy=lodash.cloneDeep(employee);console.log("OriginalEmployeeObject");console.log(employee);console.log("DeepCopiedEmployeeObject");console.log(deepCopy);deepCopy.eid="E103";deepCopy.ename="Beck";deepCopy.details=function(){return"EmployeeID:"+this.eid+"-->Salary:"+this.salary;}console.log("----------AfterModification----------");console.log("OriginalEmployeeObject");console.log(employee);console.log("DeepCopiedEmployeeObject");console.log(deepCopy);console.log(employee.details());console.log(deepCopy.details());


    输出:


    说明:修改后,两个对象都具有不同的属性。同样,每个对象的方法定义不同,并产生不同的输出。


搜索
网站分类