在JavaScript中,淺拷貝只是複製了原始資料的記憶體位址,相當於兩個資料指標指向了相同的位址,任一資料元素改變,會影響另一個;而深拷貝的兩個資料指向了不同的位址,任一個元素改變,不會影響另一個。
本教學操作環境:windows10系統、javascript1.8.5版、Dell G3電腦。
在探究淺拷貝和深拷貝之前,先來了解下堆和棧的概念
堆和棧都是記憶體中劃分出來用於儲存的區域。堆疊(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<arr.length;i++){ newArr.push(arr[i]); } return newArr; } var arrB = copy(arr); console.log("arrB:", arrB); console.log("-----------改变arrB中数组元素的值后-----------"); arrB[0] = 5; console.log("arr:", arr); console.log("arrB:", arrB);
運行結果: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);
運行結果:數組中元素改變並不會互相影響
以上三種方法只針對於數組元素是基本資料類型的簡單數組,對於第一級數組元素是對象或者數組等引用類型變數的陣列來說,上述方法都會失效。
相關推薦:javascript學習教學
以上是javascript深拷貝和淺拷貝的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!