淺拷貝

淺拷貝是會將對象的每個屬性進行依次復制，但是當對象的屬性值是引用類型時，實質復制的是其引用，當引用指向的值改變時也會跟著變化。

深拷貝

深拷貝復制變量值，對于非基本類型的變量，則遞歸至基本類型變量后，再復制。 深拷貝后的對象與原來的對象是完全隔離的，互不影響，對一個對象的修改并不會影響另一個對象。

深拷貝和淺拷貝是針對復雜數據類型來說的，淺拷貝只拷貝一層，而深拷貝是層層拷貝；

//拷貝1層(測試)------------------------------------------------------------//Object.assign()拷貝方法//拷貝{}a = {name:"張三"};b = Object.assign({},a);b.name = "李四"; //拷貝完之后進行改變屬性，測試拷貝的屬性值改變原數據是否改變。console.log(a,b);//輸出:{name:"張三"} {name:"李四"} (拷貝成功)//拷貝[]a = ["1","2","3"];b = Object.assign([],a);b[1]="hello";console.log(a,b)//輸出:["1","2","3"] ["1","hello","3"] (拷貝成功)//for in拷貝方法var copy = function(a){var res = a.constructor();for(var key in a){if(a.hasOwnProperty(key)){res[key] = a[key]}}return res;} a = {name:"123",people:{name:"456"}};b = copy(a);b.people.name="hello"; a = ["a","b","c"];b = copy(a);b[1] = 0;//拷貝完之后進行改變屬性，測試拷貝的屬性值改變原數據是否改變。console.log(a,b) //輸出:["a","b","c"] ["a","0","c"] (拷貝成功)//拷貝2層(測試)-------------------------------------------------------------//Object.assign()拷貝方法a = {name:"abc",people:{name:"張三"}};b = Object.assign({},a);b.people.name="李四"; console.log(a,b) //輸出:{name:"abc",people:{name:"李四"}} {name:"abc",people:{name:"李四"}} (拷貝失敗) //for in拷貝方法var copy = function(a){var res = a.constructor();console.log(res);for(var key in a){if(a.hasOwnProperty(key)){res[key] = a[key]}}return res;} a = ["a","b",{name:"張三"}];b = copy(a);b[2].name="李四";console.log(a,b) //輸出:{name:"abc",people:{name:"李四"}} {name:"abc",people:{name:"李四"}} (拷貝失敗)

constructor( ) 是一種用于創建和初始化class創建的對象的特殊方法。

hasOwnProperty( ) 方法會返回一個布爾值，指示對象自身屬性中是否具有指定的屬性（也就是，是否有指定的鍵）;

深拷貝最簡單的實現是：JSON.parse ( JSON.stringify ( obj ) )，同時有一定的缺陷：

① 對象的屬性值是函數時，無法拷貝
② 原型鏈上的屬性無法拷貝
③ 不能正確的處理Data類型的數據
④ 不能處理RegExp
⑤ 會忽略symbol、undefined

//JSON.parse(JSON.stringify(obj))方法拷貝2層var deepCopy = function(a){return JSON.parse(JSON.stringify(a));}var a = {name:"aaa",people:{name:"abc"}};var b = deepCopy(a);b.people.name = "def";console.log(a,b) //輸出:{name:"aaa",people:{name:"abc"}} {name:"aaa",people:{name:"def"}} (拷貝成功)//JSON.parse(JSON.stringify(obj))方法拷貝3層var deepCopy = function(a){return JSON.parse(JSON.stringify(a))}var a = [1,2,{name:"aaa"}];var b = deepCopy(a);b[2].name = "bbb";console.log(a,b); //輸出:["1","2",{name:"aaa"}]["1","2",{name:"bbb"}] (拷貝成功)//JSON.parse(JSON.stringify(obj))拷貝函數的時候var deepCopy = function(a){return JSON.parse(JSON.stringify(a));}var a = {name:"aaa",fun:function(){console.log(1)},age:undefined};var b = deep(a);b.name = "bbb"console.log(a,b); //輸出:{name:"aaa",fun:function(){console.log(1)},age:undefined};{name:"bbb"} (拷貝失敗,只拷貝到了name屬性) //JSON.parse(JSON.stringify(obj))拷貝原型鏈上的屬性function Person(name){this.name=name;}var a = new Person("Bob");var b = deep(a);console.log(a.constructor == Person); //trueconsole.log(b.constructor == Object); //true//先不說拷貝出的值，光是數據類型已經不同了 (拷貝失敗)console.log(a,b) //輸出：// Person{name:"Bob"} {name:"Bob"}

注意：

上述方法會忽略值為function以及undefined的字段，而且對data類型的支持也不太友好。
上述方法只能克隆原始對象自身的值，不能克隆他繼承的值。

深拷貝(完美拷貝)：

① 如果是基本數據類型，直接返回；
② 如果是RegExp或者Data類型，返回對應類型；
③ 如果是復雜數據類型，遞歸；
④ 考慮循環引用的問題。

function deepClone(obj,hash = new WeakMap()){ //遞歸拷貝if(obj instanceof RegExp) return new RegExp(obj);if(obj instanceof Date) return new Date(obj);if(obj === null || typeof obj !== 'object'){//如果不是復雜數據類型，直接返回return obj;}if(hash.has(obj)){return hash.get(obj);}//如果obj是數組，那么 obj.constructor 是 [Function: Array]//如果obj是對象，那么 obj.constructor 是 [Function: Object]let t = new obj.constructor();hash.set(obj,t);for(let key in obj){//遞歸if(obj.hasOwnProperty(key)){ //是否是自身的屬性t[key] = deepClone(obj[key],hash);} }return t; } var show = {name:"Bob",fun:function(){console.log(1)},age:null,pic:undefined, } var show2 = deepClone(show); show2.name="Mary" console.log(show,show2) //拷貝成功，完美拷貝

淺拷貝和深拷貝的區別：
淺拷貝只能復制對象或數組的第一層屬性，而深拷貝是拷貝多層，每一級的數據都會被拷貝出來。

總結

以上是生活随笔為你收集整理的JS----深拷贝和浅拷贝的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。