concept

Shallow copy: there are two cases

  • If the attribute is of a primitive type, a new memory space is created.
  • If the attribute is a reference type, the reference type attribute still refers to the same memory address, so if one object changes the address, it affects the other object.

Deep copy:

  • To make a complete copy of an object out of memory, a new area of heap memory is created to hold the new object, and modification of the new object does not affect the original object.

implementation

Shallow copy

Object.assign()

The object.assign () method copies the enumerable properties of any number of source objects to the target Object and returns the target Object.

let obj1 = {
  person: {name:"xiaohe".age:18
  },
  hobby:"run"
}
let obj2 = Object.assign({},obj1)  / / shallow copy
obj2.person.name = "xiaobai";  // Change the reference type
obj2.hobby = "eat"  // Modify the base type
console.log(obj1)
console.log(obj2)
Copy the code

Output result:

Code links: js.jirengu.com/hedemawajo/…

Expansion operator

The expansion operator is an ES6 / ES2015 feature that provides a very convenient way to perform shallow copies, the same functionality as object.assign ().

let obj1 = {name:'xiaohe'.address: {x:100.y:100}}
let obj2= {... obj1}  // Expand operator to implement shallow copy
obj2.address.x = 200; // Modify the value of the reference type
obj2.name = 'xiaohong'  // Modify the value of the base type

console.log(obj1)
console.log(obj2)
Copy the code

Output result:

Code links: js.jirengu.com/yopihiduvu/…

Array.prototype.concat()

let arr = [1.3, {username: 'xiaohe'}];
let arr2 = arr.concat(); / / shallow copy
arr2[2].username = 'xiaobai';
arr2[1] = 2;
console.log(arr); 
console.log(ar2); 
Copy the code

Output result:

Code links: js.jirengu.com/miraravayi/…

Array.prototype.slice()

let arr = [1.3, {username: 'xiaohe'}];
let arr2 = arr.slice(); / / shallow copy
arr2[2].username = 'xiaobai';
arr2[1] = 2;
console.log(arr); 
console.log(arr2)
Copy the code

Output result:

Code links: js.jirengu.com/werixenipi/…

A small summary

When we make a shallow copy of an object, changing the value of the reference type in the new object will affect the value of the reference type of the original object (because the reference type of the object after the shallow copy refers to the memory address of the previous object, as opposed to sharing a memory address). The basic data type creates a new memory space to store values, so when we change the value of the basic type of the new object, the value of the original object is not affected.

Deep copy

JSON.parse(JSON.stringify())

let arr = [1.3, {username: ' xiaohe'}];

let arr2 = JSON.parse(JSON.stringify(arr));
arr2[1] = 2; 
arr2[2].username = 'xiaoming'; 

console.log(arr, arr2)
Copy the code

Output result:

Code links: js.jirengu.com/nimekidehu/…

Parse: This is also done using json.stringify to convert a JS object into a JSON string, which is then parsed into a JS object using json.parse. New objects are created and the object opens up a new stack for deep copy.

Note: While this method can make deep copies of arrays or objects, it can’t handle functions and regs, because when these are processed based on json.stringify and json.parse, the resulting re is no longer a re (becomes an empty object) and the resulting function is no longer a function (becomes null).

Sample code:

let arr = [1.3, {
    username: 'xiaohe'
},function(){}];
let arr2 = JSON.parse(JSON.stringify(arr));
arr2[2].username = 'xiaobai'; 
console.log(arr, arr2)
Copy the code

You can use console.dir to print ARR (after deep copy) and ARR2 (before deep copy) on the console or editor. (I’m just going to show the comparison here)

= = = >

recursive

The implementation of recursion is cumbersome. If JSON cannot solve the problem of deep copy in the later stage, we will learn about it again

conclusion

Shallow copy

  1. If we make a shallow copy of an object, the primitive type properties of the object will create a new space. The reference type properties will still point to the same space, so when we change the value of the reference type, the other object will also be affected.

Deep copy

  1. When we make a deep copy of an object, we will make a full copy of the original object and create a new memory location. When we change the basic type and reference type of the new object, it will not affect the original object.
  2. The problem with using JSON deep copy is that the function that is copied from the object is no longer a function, but a NULL