实现深拷贝的多种方式
简单来说，深拷贝主要是将另一个对象的属性值拷贝过来之后，另一个对象的属性值并不受到影响，因为此时它自己在堆中开辟了自己的内存区域，不受外界干扰。 浅拷贝主要拷贝的是对象的引用值，当改变对象的值，另一个对象的值也会发生变化。 1.简单深拷贝(一层浅拷贝)
①for循环拷贝
// 只复制第一层的浅拷贝
1function simpleCopy(obj1) { 2 var obj2 = Array.isArray(obj1) ? [] : {}; 3 for (let i in obj1) { 4 obj2[i] = obj1[i]; 5 } 6 return obj2; 7} 8var obj1 = { 9 a: 1, 10 b: 2, 11 c: { 12 d: 3 13 } 14} 15var obj2 = simpleCopy(obj1); 16obj2.a = 3; 17obj2.c.d = 4; 18alert(obj1.a); // 1 19alert(obj2.a); // 3 20alert(obj1.c.d); // 4 21alert(obj2.c.d); // 4 22 23
②Object.assign()实现一层深拷贝
1 var obj1 = { 2 a: 1, 3 b: 2, 4 c: 3 5} 6var obj2 = Object.assign({}, obj1); 7obj2.b = 5; 8console.log(obj1.b); // 2 9console.log(obj2.b); // 5 10 var obj1 = { 11 a: 1, 12 b: 2, 13 c: ['a','b','c'] 14} 15var obj2 = Object.assign({}, obj1); 16obj2.c[1] = 5; 17console.log(obj1.c); // ["a", 5, "c"] 18console.log(obj2.c); // ["a", 5, "c"] 19 20
③slice实现
1// 对只有一级属性值的数组对象使用slice 2var a = [1,2,3,4]; 3var b = a.slice(); 4b[0] = 2; 5alert(a); // 1,2,3,4 6alert(b); // 2,2,3,4 7// 对有多层属性的数组对象使用slice 8var a = [1,[1,2],3,4]; 9var b = a.slice(); 10b[1][0] = 2; 11alert(a); // 1,2,2,3,4 12alert(b); // 1,2,2,3,4 13 14
④通过Object.create()实现
1function deepCopy(obj) { 2 var copy = Object.create(Object.getPrototypeOf(obj)); 3 var propNames = Object.getOwnPropertyNames(obj); 4 5 propNames.forEach(function(name) { 6 var desc = Object.getOwnPropertyDescriptor(obj, name); 7 Object.defineProperty(copy, name, desc); 8 }); 9 10 return copy; 11} 12 13var obj1 = { a: 1, b: {bc: 50, dc: 100, be: {bea: 1}} }; 14var obj2 = deepCopy(obj1); 15obj2.a = 20; 16obj2.b.bc = 60; 17console.log(obj1.a)//1 18console.log(obj2.a)//20 19console.log(obj1.b.bc)//60 20console.log(obj2.b.bc)//60 21 22
2.粗暴深拷贝(抛弃对象的constructor)
使用jsON.stringify和jsON.parse实现深拷贝：JSON.stringify把对象转成字符串，再用JSON.parse把字符串转成新的对象；
1function deepCopy(obj1){ 2 let _obj = JSON.stringify(obj1); 3 let obj2 = JSON.parse(_obj); 4 return obj2; 5} 6var a = [1, [1, 2], 3, 4]; 7var b = deepCopy(a); 8b[1][0] = 2; 9alert(a); // 1,1,2,3,4 10alert(b); // 2,2,2,3,4 11 12
缺陷：它会抛弃对象的constructor，深拷贝之后，不管这个对象原来的构造函数是什么，在深拷贝之后都会变成Object；这种方法能正确处理的对象只有 Number, String, Boolean, Array, 扁平对象，也就是说，只有可以转成JSON格式的对象才可以这样用，像function没办法转成JSON；
1let obj1 = { 2 fun:function(){ 3 alert(123); 4 } 5} 6let obj2 = JSON.parse(JSON.stringify(obj1)); 7console.log(typeof obj1.fun); // function 8console.log(typeof obj2.fun); // undefined 9 10
3.复杂深拷贝(相对完美)
递归拷贝实现深拷贝，解决循环引用问题
1/** 2 * 判断是否是基本数据类型 3 * @param value 4 */ 5function isPrimitive(value){ 6 return (typeof value === 'string' || 7 typeof value === 'number' || 8 typeof value === 'symbol' || 9 typeof value === 'boolean') 10} 11 12/** 13 * 判断是否是一个js对象 14 * @param value 15 */ 16function isObject(value){ 17 return Object.prototype.toString.call(value) === "[object Object]" 18} 19 20/** 21 * 深拷贝一个值 22 * @param value 23 */ 24function cloneDeep(value){ 25 26 // 记录被拷贝的值，避免循环引用的出现 27 let memo = {}; 28 29 function baseClone(value){ 30 let res; 31 // 如果是基本数据类型，则直接返回 32 if(isPrimitive(value)){ 33 return value; 34 // 如果是引用数据类型，我们浅拷贝一个新值来代替原来的值 35 }else if(Array.isArray(value)){ 36 res = [...value]; 37 }else if(isObject(value)){ 38 res = {...value}; 39 } 40 41 // 检测我们浅拷贝的这个对象的属性值有没有是引用数据类型。如果是，则递归拷贝 42 Reflect.ownKeys(res).forEach(key=>{ 43 if(typeof res[key] === "object" && res[key]!== null){ 44 //此处我们用memo来记录已经被拷贝过的引用地址。以此来解决循环引用的问题 45 if(memo[res[key]]){ 46 res[key] = memo[res[key]]; 47 }else{ 48 memo[res[key]] = res[key]; 49 res[key] = baseClone(res[key]) 50 } 51 } 52 }) 53 return res; 54 } 55 56 return baseClone(value) 57} 58 59
4.ES插件lodash
1import lodash from 'lodash' 2 3var objects = [1,{ 'a': 1 }, { 'b': 2 }]; 4var deep = lodash.cloneDeep(objects); 5deep[0] = 2; 6deep[1].a = 2; 7console.log(objects[0]);//1 8console.log(deep[0]);//2 9console.log(objects[1].a);//1 10console.log(objects[1].a);//2 11 12