Understand shallow replication and deep replication through code examples

Catalog

explain

Example 1

Example 2

Example 3

Example 4

---

explain

         If the members of an object are all value types , Then you can use the extension operator or Object.assign To achieve deep replication . If the type of an object's member is other than the value type , Also contains reference types , So you can go through JSON.parse(JSON.stringify(obj)) Or recursively traverse the replication to achieve deep replication , among JSON.parse(JSON.stringify(obj)) In this way, the value of undefined and function Properties of , and JSON.parse Can only be Date The object resolves to a string and cannot be resolved to the original Date object .

Example 1

let obj1={a:1,b:"2",c:[1,2],d:{e:1,f:2}};

let obj2={...obj1};//  perhaps  let obj2={}; Object.assign(obj2,obj1);
obj2.b="3";		   
console.log(obj1); // Object { a: 1, b: "2", c: Array [1, 2], d: Object { e: 1, f: 2 } }
console.log(obj2); // Object { a: 1, b: "3", c: Array [1, 2], d: Object { e: 1, f: 2 } }

obj2={...obj1};	   //  perhaps  obj2={}; Object.assign(obj2,obj1);
obj2.c=[2,3];	   
console.log(obj1); // Object { a: 1, b: "2", c: Array [1, 2], d: Object { e: 1, f: 2 } }
console.log(obj2); // Object { a: 1, b: "2", c: Array [2, 3], d: Object { e: 1, f: 2 } }

obj2={...obj1};	   //  perhaps  obj2={}; Object.assign(obj2,obj1);
obj2.c[0]=0;	   
console.log(obj1); // Object { a: 1, b: "2", c: Array [0, 2], d: Object { e: 1, f: 2 } }
console.log(obj2); // Object { a: 1, b: "2", c: Array [0, 2], d: Object { e: 1, f: 2 } }

obj1={a:1,b:"2",c:[1,2],d:{e:1,f:2}}; //  Because the code above has changed obj1 Value , So here's a reset .
obj2={...obj1};	   //  perhaps  obj2={}; Object.assign(obj2,obj1);
obj2.d={e:3};	   
console.log(obj1); // Object { a: 1, b: "2", c: Array [1, 2], d: Object { e: 1, f: 2 } }
console.log(obj2); // Object { a: 1, b: "2", c: Array [1, 2], d: Object { e: 3 } }

obj2={...obj1};	   //  perhaps  obj2={}; Object.assign(obj2,obj1);
obj2.d.e=4;        
console.log(obj1); // Object { a: 1, b: "2", c: Array [1, 2], d: Object { e: 4, f: 2 } }
console.log(obj2); // Object { a: 1, b: "2", c: Array [1, 2], d: Object { e: 4, f: 2 } }

Example 2

let obj1={a:1,b:"2",c:[1,2],d:{e:1,f:2}};
let obj3={a:null,b:undefined,c:NaN,d:false,e:0,f:'',g:{e:1,f:2},h:new Date(),j:function(){return 1;}};

let obj2=JSON.parse(JSON.stringify(obj1));
obj2.b="3";		   
console.log(obj1); // Object { a: 1, b: "2", c: Array [1, 2], d: Object { e: 1, f: 2 } }
console.log(obj2); // Object { a: 1, b: "3", c: Array [1, 2], d: Object { e: 1, f: 2 } }

let obj4=JSON.parse(JSON.stringify(obj3)); // obj4 The middle shift value is undefined and function Properties of , And the value is NaN The value of the property of is converted to null. In addition, for a value of Date Object properties , Not copied as Date object .
obj4.g.e="3";	   
console.log(obj3); // Object { a: null, b: undefined, c: NaN, d: false, e: 0, f: "", g: Object { e: 1, f: 2 }, h: Mon Jun 13 2022 13:23:13 GMT+0800 ( China standard time ), j: function(){return 1;} }
console.log(obj4); // Object { a: null, c: null, d: false, e: 0, f: "", g: Object { e: "3", f: 2 }, h: "2022-06-14T11:39:11.716Z" }

obj2=JSON.parse(JSON.stringify(obj1));
obj2.c=[2,3];	   
console.log(obj1); // Object { a: 1, b: "2", c: Array [1, 2], d: Object { e: 1, f: 2 } }
console.log(obj2); // Object { a: 1, b: "2", c: Array [2, 3], d: Object { e: 1, f: 2 } }

obj2=JSON.parse(JSON.stringify(obj1));
obj2.c[0]=0;	   
console.log(obj1); // Object { a: 1, b: "2", c: Array [1, 2], d: Object { e: 1, f: 2 } }
console.log(obj2); // Object { a: 1, b: "2", c: Array [0, 2], d: Object { e: 1, f: 2 } }

obj2=JSON.parse(JSON.stringify(obj1));
obj2.d={e:3};	   
console.log(obj1); // Object { a: 1, b: "2", c: Array [1, 2], d: Object { e: 1, f: 2 } }
console.log(obj2); // Object { a: 1, b: "2", c: Array [1, 2], d: Object { e: 3 } }

obj2=JSON.parse(JSON.stringify(obj1));
obj2.d.e=4;        
console.log(obj1); // Object { a: 1, b: "2", c: Array [1, 2], d: Object { e: 1, f: 2 } }
console.log(obj2); // Object { a: 1, b: "2", c: Array [1, 2], d: Object { e: 4, f: 2 } }

Example 3

let obj1={b:1,a:function(){return 1},};
let obj2=obj1; //  A shallow copy , When changing the copied object , Will change the original object .
obj2.a=function(){return 2}; 
console.log(obj1); // Object { b: 1, a: function(){return 2} }
console.log(obj2); // Object { b: 1, a: function(){return 2} }
obj2.b=2;
console.log(obj1); // Object { b: 2, a: function(){return 2} }
console.log(obj2); // Object { b: 2, a: function(){return 2} }

let obj3={b:1,a:function(){return 1},};
let obj4=obj3;
obj4={b:1,a:function(){return 2},}; //  to obj4 After reassigning ,obj4 Just like obj3 It doesn't matter .
console.log(obj3); // Object { b: 1, a: function(){return 1} }
console.log(obj4); // Object { b: 1, a: function(){return 2} }
obj4.a=function(){return 3}
console.log(obj3); // Object { b: 1, a: function(){return 1} }
console.log(obj4); // Object { b: 1, a: function(){return 3} }
obj4.b=3;
console.log(obj3); // Object { b: 1, a: function(){return 1} }
console.log(obj4); // Object { b: 3, a: function(){return 3} }

Example 4

let obja={a:null,b:undefined,c:NaN,d:false,e:0,f:'',g:{e:1,f:2},h:new Date('2022-06-11'),j:function(){return 1;}};


function deepClone(obj){
  let newObj;
  if(obj == null || "object" != typeof obj) return obj; //  Notice that this is "object", instead of "Object".
  if(obj instanceof Date){
	newObj = new Date();
	newObj.setTime(obj.getTime());
	return newObj;
  }
  if(obj instanceof Array){
	newObj = [];
	let i;
	for(i=0;i<obj.length;i++){
	  newObj[i]=deepClone(obj[i]); //  The reason why it's not used here push, To facilitate iterative deep replication .
	}
	return newObj;
  }
  if(obj instanceof Function){
	newObj=function(){
	  return obj.apply(this,arguments);
	}
	return newObj;
  }
  if(obj instanceof Object){
	newObj={};
	for(let item in obj){
	  if(obj.hasOwnProperty(item)){
		newObj[item] = deepClone(obj[item]);
	  }
	}
	return newObj;
  }
  throw new Error(" Replicated object types are not supported ："+obj.constructor.name);
}

let objb=deepClone(obja); //  Deep copy , Don't change the original object .
objb.h= new Date('2022-06-12'); 
console.log(obja); // Object { a: null, b: undefined, c: NaN, d: false, e: 0, f: "", g: Object { e: 1, f: 2 }, h: Sat Jun 11 2022 08:00:00 GMT+0800 ( China standard time ), j: function(){return 1;} }
console.log(objb); // Object { a: null, b: undefined, c: NaN, d: false, e: 0, f: "", g: Object { e: 1, f: 2 }, h: Sun Jun 12 2022 08:00:00 GMT+0800 ( China standard time ), j: function(){return 1;} }
objb.j=function(){return 2;} 
console.log(obja); // Object { a: null, b: undefined, c: NaN, d: false, e: 0, f: "", g: Object { e: 1, f: 2 }, h: Sat Jun 11 2022 08:00:00 GMT+0800 ( China standard time ), j: function(){return 1;} }
console.log(objb); // Object { a: null, b: undefined, c: NaN, d: false, e: 0, f: "", g: Object { e: 1, f: 2 }, h: Sun Jun 12 2022 08:00:00 GMT+0800 ( China standard time ), j: function(){return 2;} }