javascript深拷貝和淺拷貝的差別是什麼-前端問答-PHP中文網

在JavaScript中，淺拷貝只是複製了原始資料的記憶體位址，相當於兩個資料指標指向了相同的位址，任一資料元素改變，會影響另一個；而深拷貝的兩個資料指向了不同的位址，任一個元素改變，不會影響另一個。

javascript深拷貝和淺拷貝的差別是什麼

本教學操作環境：windows10系統、javascript1.8.5版、Dell G3電腦。

javascript深拷貝和淺拷貝的區別是什麼

在探究淺拷貝和深拷貝之前，先來了解下堆和棧的概念

堆和棧都是記憶體中劃分出來用於儲存的區域。堆疊（stack）為自動分配的記憶體空間，它由系統自動釋放；堆（heap）則是動態分配的內存，大小不定也不會自動釋放。

接著看下基本資料型別 & 引用資料型別（又稱為複雜資料型別）

1、基本型別：String、Number、Boolean、null、undefined、Symbol（ES6新增，表示獨一無二的值）；基本型別值在記憶體中佔固定大小，保存在堆疊記憶體中。

2、參考類型：Object、Array、Date、Function等；引用類型的值是對象，保存在堆記憶體中。

深淺拷貝的概念

註：深淺拷貝的區別只適用於Array與Object這樣的複雜物件。

1、淺拷貝：只是複製了原始資料的記憶體位址，相當於兩個資料指標指向了相同的位址，其中任一資料元素改變，會影響另一個。

2、深拷貝：兩個資料指向了不同的位址，資料元素改變時不會互相影響。

實例探究

1、淺拷貝

var arr = [0, 1, 2]; var arrB; //把arr赋值给arrB arrB = arr; console.log("arr:", arr); console.log("arrB:", arrB); console.log("-----------改变arrB中数组元素的值后-----------"); arrB[0] = 5; console.log("arr:", arr); console.log("arrB:", arrB);

登入後複製

運行結果：arr數組元素隨arrB數組元素的改變而改變

2、深拷貝（只做第一層深拷貝）

註：在使用深拷貝的時候，一定要弄清楚對深拷貝的要求程度，是僅深拷貝第一層級的物件屬性或是數組元素，還是遞歸拷貝所有層級的物件屬性和陣列元素？

深拷貝數組

①. 直接遍歷

var arr = [1, 2, 3, 4]; function copy(arr){ var newArr = []; for(var i=0;i
        
         登入後複製

運行結果：arrB數組元素改變並未影響arr數組元素的值

②. concat ()：用於連接兩個或多個陣列。此方法不會改變現有數組，僅只會傳回被連接數組的一個副本。

var arr = [0, 1, 2]; var arrB; //把arr赋值给arrB arrB = arr.concat(); console.log("arr:", arr); console.log("arrB:", arrB); console.log("-----------改变arrB中数组元素的值后-----------"); arrB[0] = 5; console.log("arr:", arr); console.log("arrB:", arrB);

登入後複製

運行結果：arr數組元素未隨arrB數組元素的改變而改變

③. slice()：此方法傳回一個從現有的陣列中截取一部分元素片段組成新的數組（不改變原數組）。

var arr = [0, 1, 2, 4, 5]; var arrB; //把arr赋值给arrB arrB = arr.slice(); console.log("arr:", arr); console.log("arrB:", arrB); console.log("-----------改变arrB中数组元素的值后-----------"); arrB[0] = 10; arr[4] = 8; console.log("arr:", arr); console.log("arrB:", arrB);

登入後複製

運行結果：數組中元素改變並不會互相影響

以上三種方法只針對於數組元素是基本資料類型的簡單數組，對於第一級數組元素是對象或者數組等引用類型變數的陣列來說，上述方法都會失效。