ES6參考---對象的深度克隆
一、總結
一句話總結：
先判斷類型，找出對象和數組，因為對象和數組默認值引用（也就是淺克隆），對對象和數組里面的元素再遞歸進行 對象的深度克隆 判斷
// 深度克隆(復制) function getObjClass(obj) { let result = Object.prototype.toString.call(obj).slice(8, -1); if(result === 'Null'){ return 'Null'; }else if(result === 'Undefined'){ return 'Undefined'; }else { return result; } } // for in 遍歷數組的時候遍歷的是下標 let testArr = [1,2,3,4]; for(let i in testArr){ console.log(i); // 對應的下標索引 } // 深度克隆 function deepClone(obj) { let result, objClass = getObjClass(obj); if(objClass === 'Object'){ result = {}; }else if(objClass === 'Array'){ result = []; }else { return obj; // 如果是其他數據類型不復制，直接將數據返回 } // 遍歷目標對象 for(let key in obj){ let value = obj[key]; if(getObjClass(value) === "Object" || 'Array'){ result[key] = deepClone(value); }else { result[key] = obj[key]; } } return result; } let obj3 = {username: 'kobe',age: 39, sex: {option1: '男', option2: '女'}}; let obj4 = deepClone(obj3); console.log(obj4); obj4.sex.option1 = '不男不女'; // 修改復制后的對象不會影響原對象 console.log(obj4, obj3);
二、對象的深度克隆
博客對應課程的視頻位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>對象的深度克隆</title> 6 </head> 7 <body> 8 9 10 <!-- 11 1、數據類型： 12 * 數據分為基本的數據類型(String, Number, boolean, Null, Undefined)和對象數據類型 13 - 基本數據類型： 14 特點： 存儲的是該對象的實際數據 15 - 對象數據類型： 16 特點： 存儲的是該對象在棧中引用，真實的數據存放在堆內存里 17 2、復制數據 18 - 基本數據類型存放的就是實際的數據，可直接復制 19 let number2 = 2; 20 let number1 = number2; 21 - 克隆數據：對象/數組 22 1、區別： 淺拷貝/深度拷貝 23 判斷： 拷貝是否產生了新的數據還是拷貝的是數據的引用 24 知識點：對象數據存放的是對象在棧內存的引用，直接復制的是對象的引用 25 let obj = {username: 'kobe'} 26 let obj1 = obj; // obj1 復制了obj在棧內存的引用 27 2、常用的拷貝技術 28 1). arr.concat(): 數組淺拷貝 29 2). arr.slice(): 數組淺拷貝 30 3). JSON.parse(JSON.stringify(arr/obj)): 數組或對象深拷貝, 但不能處理函數數據 31 4). 淺拷貝包含函數數據的對象/數組 32 5). 深拷貝包含函數數據的對象/數組 33 --> 34 <script type="text/javascript"> 35 // 復制的對象的方式 36 // 淺度復制 37 let obj = {username: 'kobe', age: 39, sex: {option1: '男', option2: '女'}}; 38 let obj1 = obj; 39 console.log(obj1); 40 obj1.sex.option1 = '不男不女'; // 修改復制的對象會影響原對象 41 console.log(obj1, obj); 42 43 console.log('-----------'); 44 // Object.assign(); 淺復制 45 let obj2 = {}; 46 Object.assign(obj2, obj); 47 console.log(obj2); 48 obj2.sex.option1 = '男'; // 修改復制的對象會影響原對象 49 console.log(obj2, obj); 50 51 // 深度克隆(復制) 52 53 function getObjClass(obj) { 54 let result = Object.prototype.toString.call(obj).slice(8, -1); 55 if(result === 'Null'){ 56 return 'Null'; 57 }else if(result === 'Undefined'){ 58 return 'Undefined'; 59 }else { 60 return result; 61 } 62 } 63 // for in 遍歷數組的時候遍歷的是下標 64 let testArr = [1,2,3,4]; 65 for(let i in testArr){ 66 console.log(i); // 對應的下標索引 67 } 68 69 // 深度克隆 70 function deepClone(obj) { 71 let result, objClass = getObjClass(obj); 72 if(objClass === 'Object'){ 73 result = {}; 74 }else if(objClass === 'Array'){ 75 result = []; 76 }else { 77 return obj; // 如果是其他數據類型不復制，直接將數據返回 78 } 79 // 遍歷目標對象 80 for(let key in obj){ 81 let value = obj[key]; 82 if(getObjClass(value) === "Object" || 'Array'){ 83 result[key] = deepClone(value); 84 }else { 85 result[key] = obj[key]; 86 } 87 } 88 return result; 89 } 90 91 92 let obj3 = {username: 'kobe',age: 39, sex: {option1: '男', option2: '女'}}; 93 let obj4 = deepClone(obj3); 94 console.log(obj4); 95 obj4.sex.option1 = '不男不女'; // 修改復制后的對象不會影響原對象 96 console.log(obj4, obj3); 97 98 99 </script> 100 </body> 101 </html>