JavaScript复制变量三种方法实例详解
这篇文章主要介绍了JavaScript复制变量三种方法实例详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
直接将一个变量赋给另一个变量时，系统并不会创造一个新的变量，而是将原变量的地址赋给了新变量名。举个栗子：
复制代码
复制代码
letobj={
a:1,
b:2,
};
letcopy=obj;
obj.a=5;
console.log(copy.a);
//Result
//a=5;//更改obj的值，copy变量的值也会改变
复制代码
复制代码
文章中提到了很多种办法，本文只选择了三种普遍的用法并分析了各自的优缺点，以及什么情况下使用哪种是最好的。
1.原生方法解决
最简单的办法就是一个一个循环复制给新的变量。举栗：
复制代码
复制代码
functioncopy(mainObj){
letobjCopy={};//objCopywillstoreacopyofthemainObj
letkey;
for(keyinmainObj){
objCopy[key]=mainObj[key];//copieseachpropertytotheobjCopyobject
}
returnobjCopy;
}
constmainObj={
a:2,
b:5,
c:{
x:7,
y:4,
},
}
console.log(copy(mainObj));
复制代码
复制代码
缺点：
1.objCopy的Object.prototype方法与mainObj会不一样，通常情况下我们需要完全一样的副本时，这个办法并不适用。
2.麻烦而且费时费事，代码无法重用。
3.如果原来的变量中包含Object类型，复制时还是会把这个子变量的索引交给新的变量，并不是创建了新的副本。
2.深度复制
利用JSON转换来复制变量。先将原先的变量转换为String然后再重新组装成JSON，这样会产生一个不一样的副本。
复制代码
复制代码
letobj={
a:1,
b:{
c:2,
},
}
letnewObj=JSON.parse(JSON.stringify(obj));
obj.b.c=20;
console.log(obj);//{a:1,b:{c:20}}
console.log(newObj);//{a:1,b:{c:2}}(NewObjectIntact!)
复制代码
复制代码
缺点：
1.变量很多的时候非常耗时耗内存。
3.使用Object.assign()
使用举例：
复制代码
复制代码
//circularobject
letobj={
a:'a',
b:{
c:'c',
d:'d',
},
}
obj.c=obj.b;
obj.e=obj.a;
obj.b.c=obj.c;
obj.b.d=obj.b;
obj.b.e=obj.b.c;
letnewObj2=Object.assign({},obj);
console.log(newObj2);
复制代码
复制代码
可以把它封装成一个方法：
复制代码
//封装成方法
//返回一个新的变量副本
//getacopyofanobject
functiongetNewObjectOf(src){
returnObject.assign({},src);
}
复制代码
缺点：
1.这个也是浅复制（仅复制顶层的属性，底层属性并不复制）。深层属性会同样返回索引，与原变量分享一个地址。（看下面栗子）
复制代码
复制代码
letobj={
a:1,
b:{
c:2,
},
}
letnewObj=Object.assign({},obj);
console.log(newObj);//{a:1,b:{c:2}}
obj.a=10;
console.log(obj);//{a:10,b:{c:2}}
console.log(newObj);//{a:1,b:{c:2}}
newObj.a=20;
console.log(obj);//{a:10,b:{c:2}}
console.log(newObj);//{a:20,b:{c:2}}
newObj.b.c=30;
console.log(obj);//{a:10,b:{c:30}}
console.log(newObj);//{a:20,b:{c:30}}
//注意:所有变量的*。b.c都等于30;原因看上面解释。
复制代码
复制代码
结论：
原文中还有很多其他的办法，但此文仅摘抄出最有用的几个。一般不会用到第一种办法，如需要复制的变量有很多层的话，需要用第二种办法来复制，如果变量仅仅包含一层（如json格式的配置信息变量），第三种是最高效的。
再次给出封装好的方法：
//封装成方法//返回一个新的变量副本
//getacopyofanobject
functiongetNewObjectOf(src){
returnObject.assign({},src);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。