[JS] shallow copy and deep copy

One 、 understand

1、 Shallow copy ： It's just Copy a layer of , Deeper object level Only the address was copied .

         When copying shallowly, if the data is the basic data type , So it's like a direct assignment , Will copy itself , If there is a layer of objects besides the basic data types , So for For shallow copy, only its references can be copied , The change of the object will be reflected on the copied object .

2、 Deep copy ： Deep copy will Copy multiple layers , Even if the objects are nested , They will all be copied out , The content is the same as the original object , Change the original object , The copy object will not change .

Two 、 Shallow copy

1. use Js Implement shallow copy

var obj = {
	id:1,
	name:'Andy',
	msg: {
		age:18
	}
}

var newObj = {}
for(var key in obj) {
	//key Is the current property name , obj[k] Is the current attribute value 
	newObj[key] = obj[key]
}

console.log(newObj)

From the print results, we can see that obj The attribute value of has been copied into newObj, But we should realize ：obj.msg.age And newObj.msg.age They are quoting data from the same address , let me put it another way ,newObj.msg Only copies obj.msg The address of  .

2. Light copy grammar sugar

ES6 The new method  assign It can quickly realize shallow copy

2.1 How to write it

Object.assign(target,  ...sources)

• target： To whom
• source： Objects to copy

2.2  application

var obj = {
	id:1,
	name:'Andy',
	msg: {
		age:18
	}
}

var newObj = {}
Object.assign(newObj,obj)  // hold obj Shallow copy to newObj

  summary ： Shallow copy if you encounter deeper data ( Such as ： object 、 Reference type data such as arrays ), Just copied the address .

3、 ... and 、 Deep copy

1. use Js Implement deep copy

var obj = {
	id:1,
	name:'Andy',
	msg: {
		age:18
	},
	color:['pink','red']
}

var newObj = {}
// Packaging function 
function deepCopy(newObj,obj) {
	for(var key in obj) {
		// Determine which data type the attribute value belongs to 
		// Property value  obj[key]
		//1. Determine whether this value is an array ( Arrays are also special objects , It is also reference type data )
		if(obj[key] instanceof Array) {
			newObj[key] = []
			deepCopy(newObj[key],obj[key]) // Using recursion , Give the attribute value of the original object to the new object 
			// Judge whether this value is an object 
		} else if(obj[key] instanceof Object) {
			newObj[key] = {}
			deepCopy(newObj[key],obj[key]) // Using recursion , Give the attribute value of the original object to the new object 
		} else {
			// If it is a normal data type 
			newObj[key] = obj[key]
		}
		
	}
}
deepCopy(newObj,obj)

Traverse the original object , Check what data type each attribute value belongs to ： if Simple data type , Direct assignment ; if Complex data type Of ( Array 、 object ), Let's first judge which complex data type it belongs to , Then we go inside and use recursive The way , Take out the value inside and assign it .

  It is worth mentioning that ： Determine whether the condition is an array 、 Whether it is an object or not, the two cannot be reversed , Because if you first judge whether it is an object , Then the array will also enter the judgment , Because the array is “ Special objects ”.