標籤:content 比較 對象 分享圖片 拷貝 console object push tor
JavaScript中對象的深拷貝來說一直都算比較噁心 畢竟沒有什麼api能直接全拷貝了 得自己便利寫 最近在項目中需要深拷貝 自己簡單封了個方法
話不多說 直接上碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body>10 <script>11 function deepCopy(arr_obj){12 //constructor 屬性返回對建立此對象的數組函數的引用。13 let obj_arr = arr_obj.constructor === Array ? [] : {};14 for(let key in arr_obj){15 //Object.prototype.toString.call()類型判斷16 //Object.prototype.toString.call(obj_arr) 返回 [object Object] 或者 [object Array]17 if(Object.prototype.toString.call(arr_obj[key]) === ‘[object Object]‘){18 obj_arr[key] = deepCopy(arr_obj[key]);19 }else{20 21 if(Object.prototype.toString.call(arr_obj[key]) === ‘[object Array]‘){22 //console.log(arr_obj[key]);23 arr_obj[key].forEach((item,index)=>{24 if(Object.prototype.toString.call(item) === ‘[object Object]‘){25 obj_arr[key][index] = deepCopy(item);26 }else{27 obj_arr[key] = [];28 obj_arr[key][index] = item;29 }30 })31 }else{32 obj_arr[key] = arr_obj[key];33 }34 }35 }36 37 return obj_arr38 }39 let objA = {40 a:123,41 b:[‘a‘,‘c‘,{‘a‘:[‘a‘,‘b‘,[‘c‘,‘d‘,{e:‘c‘}]]}],42 c:‘yyyy‘43 }44 let objB = deepCopy(objA);45 objA.a = 45646 objA.b.push(‘yyyy‘);47 console.log(objA,objB);48 49 </script>50 </body>51 </html>
這個方法目前為止能拷貝的有 對象的value有數組 數組裡面有對象 數組裡面有數組 還有一些嵌套之類的 在複雜的資料結構沒測過 不過這種也基本夠用了
我改了objA.a 和objA.b.push(‘yyyy‘);
和深拷貝完成的objB做對比如下:
拷貝成功
JavaScript遞迴簡單實現個對象深拷貝