What is a deep copy of js?

This article mainly shows you "what is a deep copy of js", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "what is a deep copy of js" this article.

Js deep copy

Before we get to the point, we need to understand the way data is stored.

Data storage mode

Before we talk about it, we need to know how value types and reference types are stored.

There are two data types in the JavaScript data type.

Value types: string (String), number (Number), Boolean (Boolean), empty (Null), undefined (Undefined), Symbol.

For simple data segments stored in stack memory, the data size is determined and the memory space can be allocated.

Reference data types: object (Object), array (Array), function (Function).

For objects stored in heap memory, there is a pointer in stack memory that points to a location in heap memory. Then get the required data from the heap memory.

The storage is as follows:

What is a shallow / deep copy

After talking about storage, let's talk about shallow copy and deep copy.

Copy is what we often call copy,ctrl+c,ctrl+v, so let's take a look at the example

When we assign values to value types and reference types respectively.

Var a = 5 var b = a b + = 5 console.log ('brr' + a brr'+ b) var arr= [1, 2, 3] var brr=arr brr.push (10) console.log ("brr, arr) console.log (" brr is ", brr)

Phenomenon: we find that value types are not affected by each other, but the array (reference type) brr array changes the arr array when it adds elements.

Explanation and analysis: a shallow copy only occurs on a reference type, and a simple assignment to a reference type will only assign a pointer to heap memory, which is called a shallow copy. A deep copy is a full copy of a reference type that is not an address pointer.

Take a shallow copy of the schematic below:

Common deep copy implementation

Then we must not have the phenomenon of shallow copy when assigning reference types, which has an impact on the original data. Then we need to make a deep copy.

1. Through JSON.stringify and JSON.parse

Arrays and objects that can be copied deeply, but functions cannot be copied, nested copies of objects or arrays can be made.

Disadvantages: unable to achieve deep copy of methods in the object

Use:

Var brr=JSON.parse (JSON.stringify (arr))

Example:

Var arr = {name: 'romantic programmer', age: 20, adress: ['jiangxi',' changsha'], friends: {friend1: 'Zhang San', friend2:'Li Si'} Function () {console.log ("I am the object of Romanticism")} var brr=JSON.parse (JSON.stringify (arr)) brr.name=' extrajudicial fanatic Zhang San 'brr.adress [0] =' Changsha 'console.log ("arr is", arr) console.log ("brr is", brr)

two。 Extension operator

The structure assignment characteristic method of the object is used.

Disadvantages: no deep copy of the object nested in the object is equivalent to a deep copy of a layer of reference object

Use:

Var brr= {... arr}

Example:

Var arr = {name: 'romantic programmer', age: 20, adress: ['jiangxi',' changsha'], friends: {friend1: 'Zhang San', friend2:'Li Si'} Function () {console.log ("I am the object of Romanticism")} var brr= {... arr} brr.name=' extrajudicial fanatic Zhang San 'brr.adress [0] =' Changsha 'console.log ("arr is", arr) console.log ("brr is", brr)

3. Handwritten recursive deep copy function

Perfect solution

Function:

/ / use recursion to implement deep copy function deepClone (obj) {/ / determine whether the copied obj is an object or an array var objClone = Array.isArray (obj)? []: {} If (obj & & typeof obj = "object") {/ / obj cannot be empty and is either an object or an array because null is also object for (key in obj) {if (obj.hasOwnProperty (key)) {if (obj [key] & & typeof obj [key] = = "object") {/ / obj where the property value is not empty and is still an object Make a deep copy of objClone [key] = deepClone (obj [key]) / / Recursive deep copy} else {objClone [key] = obj [key]; / / Direct copy} return objClone;}

Example:

Var arr = {name: 'romantic programmer', age: 20, adress: ['jiangxi',' changsha'], friends: {friend1: 'Zhang San', friend2:'Li Si'} Fun: function () {console.log ("I am the object of + this.name +")} var brr = deepClone (arr) brr.name = 'extrajudicial fanatic Zhang San' brr.adress [0] = 'Changsha' console.log ("arr is", arr) arr.fun () console.log ("brr is" Brr) brr.fun () / / use recursion to implement deep copy function deepClone (obj) {/ / determine whether the copied obj is an object or an array var objClone = Array.isArray (obj)? []: {} If (obj & & typeof obj = "object") {/ / obj cannot be empty and is either an object or an array because null is also object for (key in obj) {if (obj.hasOwnProperty (key)) {if (obj [key] & & typeof obj [key] = = "object") {/ / obj where the property value is not empty and is still an object Make a deep copy of objClone [key] = deepClone (obj [key]) / / Recursive deep copy} else {objClone [key] = obj [key]; / / Direct copy} return objClone;}

The above is all the contents of the article "what is a Deep copy of js". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!