前端：數據的淺拷貝與深拷貝問題區別解析（來一點變相深拷貝的說）

前端數據交互賦值的時候很容易遇到深拷貝淺拷貝的問題，就會導致數據的耦合，今天來用一組代碼來說明一下

首先來看一下普通的數據拷貝：

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

巴拉巴拉：

==主頁傳送門==