前端：数据的浅拷贝与深拷贝问题区别解析（来一点变相深拷贝的说）

前端数据交互赋值的时候很容易遇到深拷贝浅拷贝的问题，就会导致数据的耦合，今天来用一组代码来说明一下

首先来看一下普通的数据拷贝：

<script>
    const sourceData = ['today','is','Sunday',20190622];
    const commonCopy = sourceData;
    commonCopy[3] = '20190622Wrong';
    console.log('sourceData:',sourceData,'commonCopy:',commonCopy);
</script>

这里发现输出的结果：

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))

<script>
    const sourceData = ['today','is','Sunday',20190622]; 
    const stringifyData = JSON.parse(JSON.stringify(sourceData));
    stringifyData[3] = '20190623Right';
    console.log('sourceData：',sourceData,'stringifyData：',stringifyData);
</script>

输出结果：

sourceData：["today", "is", "Sunday", 20190622]

stringifyData：["today", "is", "Sunday", "20190623Right"] 

这里就比较大手笔了，B比较傲娇，不想跟A拥有同一幢别墅，B和A是好朋友，B参考A的大别墅的设计图纸，建了一幢新的大别墅，那么此时A就比较不开心了，因为B又给别墅的席梦思小床换成了大的，A的别墅却没有大床可躺了。这种就是深拷贝，底层在原有A所拥有数据的基础上，新开一个内存用于存放数据，并且此数据属于B。此方法属于比较中规中矩的。

2：ES5变相深拷贝concat（）

<script>
    const sourceData = ['today','is','Sunday',20190622];
    const deepCopyArr = sourceData.concat();
    deepCopyArr[3] = '20190623Right';
    console.log('sourceData:',sourceData,'deepCopyArr:',deepCopyArr);
</script>

输出结果：

sourceData:["today", "is", "Sunday", 20190622]

deepCopyArr:["today", "is", "Sunday", "20190623Right"]

同样达到了深拷贝的效果，看起来更舒服。

3：还不够舒服？那再来碗ES6拓展字符串模式：

<script>
    const es6Arr = [1,2,3,4];
    const es6DeepArr = [...es6Arr];
    es6DeepArr[1] = 201906231551;
    console.log('es6Arr：',es6Arr,'es6DeepArr：',es6DeepArr)
</script>

输出结果：

es6Arr：[1, 2, 3, 4]

es6DeepArr：[1, 201906231551, 3, 4]

巴拉巴拉：

==主页传送门==