在使用JavaScript对数组进行操作的时候,我们经常需要将数组进行备份,事实证明如果只是简单的将它赋予其他变量,那么我们只要更改其中的任何一个,然后其他的也会跟着改变,这就导致了问题的发生。
参考Object.assign():https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
<!DOCTYPE html><html><head> ???<title>测试深拷贝,浅拷贝方法及现象</title></head><body> ???<script type="text/javascript"> ???????//Object.assign()方法是浅拷贝 ???????var myobject={ ???????????a:"a", ???????????b:"b", ???????????c:"c", ???????} ???????var newobject=Object.assign({},myobject); ???????newobject.a=222; ???????document.writeln("原始:"+JSON.stringify(myobject)); ???????document.writeln("现在:"+JSON.stringify(newobject)); ???????????????function test() { ?????????‘use strict‘; ?????????let obj1 = { a: 0 , b: { c: 0}}; ?????????let obj2 = Object.assign({}, obj1); ?????????console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} ???????????????????obj1.a = 1; ?????????console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} ?????????console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} ???????????????????obj2.a = 2; ?????????console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} ?????????console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}} ???????????????????obj2.b.c = 3; ?????????console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}} ?????????console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}} ???????????????????// Deep Clone ?????????//利用json方法是深复制,但要JSON安全 ?????????obj1 = { a: 0 , b: { c: 0}}; ?????????let obj3 = JSON.parse(JSON.stringify(obj1)); ?????????obj1.a = 4; ?????????obj1.b.c = 4; ?????????console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}} ???????} ???????test(); ???</script><!-- ????<script type="text/javascript"> ???????//这是浅拷贝,该变拷贝的对象会改变原始对象的值 ???????var arr = ["One","Two","Three"]; ???????var arrto = arr; ???????arrto[1] = "test"; ???????document.writeln("数组的原始值:" + arr + "<br />");//Export:数组的原始值:One,test,Three ???????document.writeln("数组的新值:" + arrto + "<br />");//Export:数组的新值:One,test,Three ???</script> --> ????<!-- ?????<script type="text/javascript"> ???//这是深拷贝,该变现有对象不会改变原始对象的值 ????????????var arr = ["One","Two","Three"]; ???var arrtoo = arr.slice(0); ???arrtoo[1] = "set Map"; ???document.writeln("数组的原始值:" + arr + "<br />");//Export:数组的原始值:One,Two,Three ???document.writeln("数组的新值:" + arrtoo + "<br />");//Export:数组的新值:One,set Map,Three ????</script> --><!-- ?????<script type="text/javascript"> ???//这是深拷贝 ????????var arr = ["One","Two","Three"]; ???????var arrtooo = arr.concat(); ???????arrtooo[1] = "set Map To"; ???????document.writeln("数组的原始值:" + arr + "<br />");//Export:数组的原始值:One,Two,Three ???????document.writeln("数组的新值:" + arrtooo + "<br />");//Export:数组的新值:One,set Map To,Three ????</script> --><!-- ?????<script type="text/javascript"> ???//深拷贝,json方法是深拷贝 ????????var someobj={ ????????????a:"a", ????????????b:"b", ????????????c:"c" ????????} ????????var newobject=JSON.parse(JSON.stringify(someobj)); ????????someobj.a="aaaa"; ????????document.writeln("原始:"+JSON.stringify(someobj)+"<br/>"); ????????document.writeln("现在:"+JSON.stringify(newobject)+"<br/>"); ????????//原始:{"a":"aaaa","b":"b","c":"c"} ???????// 现在:{"a":"a","b":"b","c":"c"} ????</script> --> </body></html>
这里只是浅尝辄止,以后还会继续探究。
总结:浅拷贝Object.assign(),
深拷贝用JSON.parse(JSON.stringify(someobj));
但要保证someobj是json安全的,符合json规则。
深拷贝与浅拷贝js,方法
原文地址:https://www.cnblogs.com/wulinzi/p/8283814.html