js中深克隆與淺克隆

js中深克隆與淺克隆

參考：https://blog.csdn.net/sinat_17775997/article/details/70482279

最近的專案要做一個對錶資料的增加，由於表的設計比較複雜：欄位中存的資料是json格式，相當於表中表。8多說，上圖。

顯示規格及選項列表（核取方塊），並儲存使用者選擇的結果

需要經過遍歷新增規格：
新增完網路制式後，再加螢幕尺寸5.0，需要在之前的規格列表中多加一個螢幕尺寸屬性；若是再多勾選一個尺寸，那麼所有規格資料需要克隆之前網路制式的資料，再加上新的屬性：螢幕尺寸6寸。

變成這樣的格式。這時候要求用到深克隆，而不是淺克隆。
那麼什麼是深克隆，什麼是淺克隆呢？
首先，克隆只針對物件、陣列、函式等複雜資料。
淺克隆就是將棧記憶體中的引用複製一份，賦給一個新的變數，本質上兩個指向堆記憶體中的同一地址，內容也相同，其中一個變化另一個內容也會變化（根本上改變的是同一個物件）。

深克隆就是建立一個新的物件，開闢一塊記憶體，然後將原物件中的資料全部複製過去，新物件和原物件毫無關係，互不影響。
深克隆本質上是創造一個完全一樣的物件，這裡簡單介紹兩種js的deepClone方法。talk is cheap show me the code~
一、遞迴完成深克隆
function deepClone(arr) {
if (typeof arr != “object”) {
return arr;
}
var result = {};
for (var i in arr) {
result[i] = deepClone(arr[i]);
}
return result;
}
程式碼非常簡單，只有十行程式碼。首先判斷元素是否是object，不是打哪兒來回哪兒去，然後建立一個物件賦給result。然後遍歷arr中所有的元素，遞迴判斷是否是深層物件，不是返回賦給result。這樣就實現了深克隆。下面測試一下。

var a = {
name:“小明”,
age:“12”,
sister:{
name:“小美”,
age:“10”
}
}

var arrTwo = arrOne;
var arrThree = deepClone(a);
arrThree.name = “小光”;
arrThree.object.name = “小雅”;

console.log(arrTwo);
console.log(arrThree);
輸出結果也在意料之中

Object:
name:“小明”,
age:“12”,
Object:
name:“小美”,
age:“10”

Object:
name:“小光”,
age:“12”,
Object:
name:“小雅”,
age:“10”
這裡可以看到在對原陣列操作時，克隆返回的陣列內容不會改變。兩個陣列是完全不同的兩個物件，在堆記憶體中各佔一塊，沒有關聯。
這個我也沒試過，是複製參考資料中的。因為用的是下面更為簡單的，只需要一行程式碼就搞定。
二、利用JSON

var a = {1};

var b= JSON.parse(JSON.stringify(a));

這時候你再修改b的值，就和a無關了。
JSON.stringify(a)是將a轉為json物件（json字串）。然後JSON.parse（）是將這個json物件轉為object物件，在這個過程中會複製所有的值。並且是一個全新物件