Shulou(Shulou.com)06/02 Report--

Today, the editor will show you how to analyze the deep copy and shallow copy in the front end of web. The knowledge points in this article are introduced in great detail. Friends who feel helpful can browse the content of the article together with the editor, hoping to help more friends who want to solve this problem to find the answer to the problem. Follow the editor to learn more about "how to analyze the deep copy and shallow copy in the front end of web".

Deep and shallow copies are common in interviews, focusing on your understanding of basic types and reference types. In my numerous interviews, none of the candidates has been able to answer this question, including training teachers from many institutions. This article will let you make a clear distinction between basic types and reference types, and you will not be afraid of any programming language, because this is not a js language, it is knowledge that any programming language needs to master, and in any programming language, the two are the same.

Deep copy and shallow copy are mainly for the properties of objects are objects (reference types)

I. the difference between basic types and reference types

1. Learn about memory first

The memory partition of any programming language is almost the same.

Memory is to store data, different types of data should be stored in different areas, that is, classified storage, different regional functions and functions are also different. Just like the wardrobe in your home, it is divided into different areas: the area where you hang the suit, the area where you put your socks, and so on. I'm sure everyone will put these two things in different areas. Otherwise, when you go to a high-end party in a suit, put your hand in your trouser pocket and pull out a smelly sock, isn't it very embarrassing! Ha ha!

The following is a partition diagram of the memory. Memory is divided into four areas: stack area (stack), stack area, global static area, read-only area (constant area and code area).

Https://blog.csdn.net/jiang7701037/article/details/98728249

2. The difference between basic types and reference types stored in memory

Now only look at the stack area and stack area, regardless of other areas, it is also assumed to be local variables.

When the above function testf is called

1), define the local variable age, because age is a local variable, so apply for memory space in the stack, named age, and because the value assigned to age is the basic type, so the value is directly stored in the stack.

2) define the local variable arr, because arr is a local variable, so apply for space in the stack, but what is stored in the memory of arr? Since the value assigned to arr is not a primitive type, but a reference type (new), we first apply for space in the heap to store the data. Then assign the address of the stack area to arr.

3. What exactly are basic types and reference types

1) basic type: the value type, that is, the value is stored in the memory area corresponding to the variable, for example, the value 250 is stored in the memory corresponding to the age variable above.

2), reference type: it is the address type.

What is an address: an address is a number. what is the use of an address is to make it easy to find. Why everyone's home should have a unique address, that is, when mailing, you can find your home.

For example: our earliest supermarket bag storage grid, each box has a number, when you deposit the bag, the waiter will put your things in a grid, and then give you the grid number (a brand). When you pick up your bag after shopping, give the waiter your brand (with a number) directly, and the waiter will find your bag according to your number. This number is the address of the grid. Memory is the same, each memory has a number, easy for cpu to find. Otherwise, the vast ocean of memory, cpu to find data to rely on what to find.

The variable arr above is the reference type, and the address is stored in the memory corresponding to arr, and the real data is in the memory area corresponding to the address, for example, when you fill out your resume, you will write your home address on the piece of paper on your resume. The place where your home address is written on your resume is the equivalent of arr. And your home can be found according to this address. The place where your home address is written on your resume is equivalent to referring to your home (you can imagine an invisible thread pulling your home, and you can find your home along the invisible thread on your resume). So it's called a reference type.

II. Changes in memory when basic types and reference types are assigned

You can think of an assignment as a copy.

1. Basic types:

2. Reference type:

If you assign a value to arr [0], the value of arr1 [0] will also change, because arr and arr1 keep the same address, and the data referenced by each other is shared. Just like you write down your home address in many places (the piece of paper on your resume, the piece of paper on your hukou book). So many pieces of paper are quoted from your home. According to a piece of paper to find your home, put your home with 1 million cash (the data has changed, equivalent to arr [0] = 10), and then according to the address of another piece of paper also found your home, you found that you 1 million in (don't tell me that someone took it)

If you add a code to the above: arr [0] = 10; then the memory will change as follows:

Third, the difference between basic types and reference types as function parameters (this can be ignored)

1. The basic type is used as the parameter of the function.

2. The reference type is used as the parameter of the function:

IV. Deep copy and shallow copy:

Finally talking about deep copy and shallow copy.

In fact, in the second point has already talked about copy, the so-called copy, is the assignment. To assign one variable to another is to copy the contents of the variable. To assign the value of one object to another is to make a copy of an object.

1. There is no problem with the basic class

Because, when the basic type is assigned, it is data (therefore, there is no problem of deep copy and shallow copy).

Such as:

Var x = 100

Var y = x; / / at this time x and y are both 100

If you want to change the value of y, the value of x will not change.

2. There is a problem with the reference type

Because, when a reference type is assigned, the value address (that is, what the reference type variable holds in memory), it is strongly recommended to look at the previous second point (the memory changes of the basic type and reference type when assigning values) several times to ensure a deep understanding. In this way, there will be no problem in the future when you encounter any topic related to the reference type (such as inheritance, the property of the parent class is the reference type) once and for all.

Such as:

Var arr1 = new Array (122.23,334)

Var arr2 = arr1;// this is the simplest shallow copy.

If you want to change the data referenced by arr2: arr2 [0] = 100, then the value of arr1 [0] is also 100.

The reason is that arr1 and arr2 refer to the same area of memory (as reflected in the second point above).

This is the simplest shallow copy, because only a copy of the address of arr1 is given to arr2, not a copy of the data of arr1. So, the copy is not deep enough.

3. Demonstrate shallow copy and deep copy in the way of json object (also reference type)

1), define a json object (the property of the object is also the object)

00001.

Var p = {

Id: 007

"name": "Andy Lau"

"books": new Array (Romance of the three Kingdoms, A Dream of Red Mansions, Water margin) / / this is a citation type.

}

00002.

2) make a copy of the object p

(1) shallow copy

00001.

Var p2 = {}

For (let key in p) {

P2 [key] = p [key]

}

P2.books [0] = "four Kingdoms"

Console.log (p2)

Console.log (p)

00002.

The results printed in the console (books [0] of p and p2 become "four Kingdoms"):

Memory:

(II) Deep copy (preliminary)

Var p2 = {}

For (let key in p) {

If (typeof p [key] = 'object') {

P2 [key] = []; / / because I write an array above, so temporarily assign an empty array.

For (let i in p [key]) {

P2 [key] [I] = p [key] [I]

}

} else {

P2 [key] = p [key]

}

}

P2.books [0] = "four Kingdoms"

Console.log (p2)

Console.log (p)

The result printed in the console (only the books [0] of p2 becomes "Shikoku")

Memory:

(III) Deep copy (final)

3.1.Deep copy _ if the properties are all json objects, then recursively

/ / if the property of an object is an object (reference type), the property of the property is also a reference type, that is, many layers of nesting. What to do? it can only be recursive.

/ / to copy the following objects:

00001.

Var p = {

Id: 007

"name": "Andy Lau"

"wife": {

Id: 008

"name": the wife of Liu de

"address": {

"city": "Beijing"

"area": "Haidian District"

}

}

}

/ / write function

Function copyObj (obj) {

Let newObj= {}

For (let key in obj) {

If (typeof obj [key] = = 'object') {/ / if key is a wife and a reference type, then recursive

NewObj [key] = copyObj (obj [key])

} else {/ / basic type, direct assignment

NewObj [key] = obj [key]

}

}

Return newObj

}

Let pNew = copyObj (p)

PNew.wife.name= "Zhang San Mad"

PNew.wife.address.city = "Hong Kong"

Console.log (pNew)

Console.log (p)

3.2. Deep copy _ if the attribute is an object of non-key-value pairs such as an array

You have to deal with it separately: either add a self-replicating function to the array (recommended), or judge separately.

`

/ / add a method to the array object to copy itself

Array.prototype.copyself = function () {

Let arr = new Array ()

For (let i in this) {

Arr [I] = this [I]

}

Return arr

}

Var p = {

Id: 007

"name": "Andy Lau"

"books": new Array (Romance of the three Kingdoms, A Dream of Red Mansions, Water margin) / / this is a citation type.

}

Function copyObj (obj) {

Let newObj= {}

For (let key in obj) {

If (typeof obj [key] = = 'object') {/ / if key is a wife and a reference type, then recursive

NewObj [key] = obj [key] .copyself ()

} else {/ / basic type, direct assignment

NewObj [key] = obj [key]

}

}

Return newObj

}

Var pNew = copyObj (p)

PNew.books [0] = "four Kingdoms"

Console.log (pNew)

Console.log (p)

`

Thank you for your reading, the above is "how to analyze the deep copy and shallow copy in the front end of web" all the content, learn friends hurry up to operate it. I believe that the editor will certainly bring you better quality articles. Thank you for your support to the website!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.