前端数据交互赋值的时候很容易遇到深拷贝浅拷贝的问题,就会导致数据的耦合,今天来用一组代码来说明一下
首先来看一下普通的数据拷贝:
这里发现输出的结果:
sourceData:["today", "is", "Sunday", "20190622Wrong"]
commonCopy:["today", "is", "Sunday", "20190622Wrong"]
举个小例子就是,A拥有一幢别墅,A配了好多把钥匙,把其中的一把钥匙给了B,B把别墅里的1.2*1.8的席梦思小床全部换成了1.8*2的大床,那么A回到别墅,就会发现,呀,这床变大了啊!定义的源数据被拷贝以后,对拷贝后的数据进行修改,发现源数据也被修改了,其实这是因为,直接对源数据进行拷贝,底层数据并没有被拷贝出一份新的,只是sourceData和commonCopy同时指向了同一份数据,所以无论哪一个对其进行操作并修改了数据,二者都会接收到同样的结果。
那么怎么拿到同样的数据,而又不相互影响呢?
1:使用JSON.parse(JSON.stringify(data))
输出结果:
sourceData:["today", "is", "Sunday", 20190622]
stringifyData:["today", "is", "Sunday", "20190623Right"]
这里就比较大手笔了,B比较傲娇,不想跟A拥有同一幢别墅,B和A是好朋友,B参考A的大别墅的设计图纸,建了一幢新的大别墅,那么此时A就比较不开心了,因为B又给别墅的席梦思小床换成了大的,A的别墅却没有大床可躺了。这种就是深拷贝,底层在原有A所拥有数据的基础上,新开一个内存用于存放数据,并且此数据属于B。此方法属于比较中规中矩的。
2:ES5变相深拷贝concat()
输出结果:
sourceData:["today", "is", "Sunday", 20190622]
deepCopyArr:["today", "is", "Sunday", "20190623Right"]
同样达到了深拷贝的效果,看起来更舒服。
3:还不够舒服?那再来碗ES6拓展字符串模式:
输出结果:
es6Arr:[1, 2, 3, 4]
es6DeepArr:[1, 201906231551, 3, 4]
巴拉巴拉:
==主页传送门==