Shallow copy

With shallow copy, if you change objects of obj2, obj1 doesn’t change anymore, they don’t reference a value, but if there’s an object in it, it’s invalid, they’re the same reference.

Method 1: Clone an Object using object. create

Method 2: Concat arrays

Method 3: Assign the object

Method 4: Extend the operator (…)

Method 1: Clone an Object using object. create

Usage:

Var obj1 = {a:2,b:{name:' x '}}; var obj2 = Object.create(obj1);Copy the code

A:

Var obj1 = {a:2,b:{name:' x '}}; var obj2 = Object.create(obj1); obj2.a = 3; Obj2.b.name = 'red '; console.log(obj1,obj2);Copy the code

Results:

Conclusion:

Level 1 object A :2 in obj1 is not affected, but level 2 object B is. Therefore, Object. Create cloned objects can only implement deep copies of level 1 objects.

Method 2: Concat arrays

Usage:

[].concat(arr)
Copy the code

A:

Var arr = [{id: 1, name: '1', the other: {sex: 'male'}}] var BRR = [] concat (arr); brr[0].id = 2; BRR [0]. Other. Sex = 'female '; console.log(arr[0],brr[0])Copy the code

Results:

Conclusion:

The arR level 1 object (ID) and the object inside the object (other.sex) refer to the same pointer and cannot implement deep copy.

Method 3: Assign the object

Usage:

var obj1 = {a: 1}
var obj2 = Object.assign({}, obj1)
Copy the code

A:

var obj = {id:1,name:{a:'xx'},fn:function(){},un:undefined};
var obj2 = Object.assign({}, obj);
obj2.id = 2;
obj2.name.a = 'obj2';
console.log(obj,obj2)
Copy the code

Results:

Conclusion:

Obj’s first-level object (ID) is unaffected, but the object inside the object (name.a) still refers to the same pointer and cannot be deep-copied.

Method 4: Extend the operator (…)

Usage:

var obj1 = {a: 1} var obj2 = {... obj1}Copy the code

A:

var obj = {id:1,name:{a:'xx'},fn:function(){},un:undefined}; var obj2 = {... obj}; obj2.id = 2; obj2.name.a = 'obj2'; console.log(obj,obj2)Copy the code

Results:

Conclusion:

Obj’s first-level object (ID) is unaffected, but the object inside the object (name.a) still refers to the same pointer and cannot be deep-copied.

Deep copy

Parse (json.stringify ())

Method 2: MessageChannel

Method 3: Lodash.clonedeep

With deep copy, even if the object has an object inside it, it will not be the same reference, but undefined and function will be ignored, and function and undefined will not be ignored with method 3.

Parse (json.stringify ())

var obj1 = {a: 1}
obj2 = JSON.parse(JSON.stringify(obj1))
Copy the code

Method 2: MessageChannel

var obj = {id:1,name:{a:'xx'}}; function structuralClone(obj) { return new Promise((resolve) => { const {port1, port2} = new MessageChannel(); port2.onmessage = ev => resolve(ev.data); port1.postMessage(obj); }) } structuralClone(obj).then(res=>{ console.log(res); var obj3 = res; obj3.name.a = 'obj3'; console.log(obj,obj3); }) <! Promise is used to send data.Copy the code

Method 3: Lodash.clonedeep

import _ from 'lodash'
var obj = {id:1,name:{a:'xx'},fn:function(){},un:undefined};
var obj2 = _.cloneDeep(obj);
obj2.name.a = 'obj2';
console.log(obj,obj2)
Copy the code