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>