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

This article introduces the relevant knowledge of "the concept of javascript assignment, shallow copy and deep copy". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Stack, heap, pointer address

Stack memory: personal understanding is that both basic data types and reference data types will use a space, this space exists in the form of key-value, value itself can not be modified, can only be assigned to replace

Heap memory: heap, that is, heap, each space opened up can be thought of as an empty paper box, and the carton heap where the paper box is located is the "heap". There is no concept of heap for basic data types. Heap, for reference data types only. The storage mode should be in the form of object, which contains data in the form of key-value. Value itself is also unmodifiable and can only be assigned and replaced.

Pointer address: the value stored on the stack for the reference data type is the pointer address, which points to the object stored in the heap.

Second, assignment

There are two assignments, one is the assignment of the basic data type, the other is the assignment of the reference data type, the basic data type is assigned the "value", and the reference data type is assigned the "pointer address".

1. Basic data type assignment

/ / open a space in the stack, the space name is a, and the storage value 1 position var a = 1 position bank / open a space in the stack, the space name is b. Then first make a copy of the value of a, and then store it in bvar b = a

As shown below:

two。 Reference data type assignment

/ / first, open up a space an on the stack to store the pointer address, and set the pointer address to address1 At the same time, a space is opened up in the heap to place object data 2 var a = {no: 1, per: {name: "jack"}, per2: {name: "rose"}} / / an assigned to b, and b opens up a space in the stack to place address1. This pointer points to the object data var b = an in the heap of a. / / to modify the value b after assignment is to modify the object data pointed to by the pointer address1 of b b.no = 1314 / / modifying b will affect the original data (all levels of data will be affected) / / this original data is actually not the original data, because an and b are actually the same data / / just like going to the United States from China, you can fly from place a (such as Beijing) or place b (such as Shanghai), but you all arrive at the same place (that is, object data) b.per.name = "Wang Wu"; console.log (a, b)

The above code is printed as shown in the figure

Changes to b affect the original value of a. The changes to a will also synchronize the value of b. I have not written out the changes to a. You can try it yourself. The result is the same.

For the above code, the reference data type assignment, as shown in the following figure:

Whether you modify the an object or the b object, you are modifying the "obj" object

III. Shallow copy

A shallow copy of the reference data type, as follows:

/ / open a space an on the stack, store the pointer address of a, set the pointer address to address2a, and open a space in the heap at the same time, set this space as A, store an object data var a = {no: 1, per: {name: "jack",}, per2: {name: "rose"}} / / open a space b on the stack, store the pointer address of b, set the pointer address to address2b, and open up a space in the heap Let this space be B, and store b object data var b = {} / / A loop the data of a to determine that if there is a key, assign the value to the key position corresponding to B / / this loop. When you encounter that the data type is the basic data type, the value is assigned. When a reference data type is encountered, the pointer address for (var p in a) {if (a.hasOwnProperty (p)) {b [p] = a [p]}} / / the first layer modification of a pair of b b.no = 1314bot b.per2 = []; / / the second layer modification of a pair of b b.per.name = "Wang Wu" / / shallow copy. After modifying b, the changes in the first layer will not affect the original data, and the changes in the second layer and above will affect the original data / / currently there is no third layer or above written, so you can test it yourself. Console.log (a, b)

The running result is shown in the figure:

It can be understood that the original thing of an is completely copied and put into b, but the operation of b is only related to b. What was the value of an and what it is now? the modification of b has no effect on an at all.

Finally, the following figure shows a deep copy:

IV. Deep copy

Deep copy, to put it bluntly, is the recursion of the shallow copy, that is, as described in the shallow copy chapter, the first layer of the shallow copy has been completely copied to the new place, and then the second layer and above, their attribute values will be copied to the new place, and finally the well water will not invade the river.

The code is as follows:

/ / open a space an in the stack, store the pointer address of a, set the pointer address to address3a, and open up a space in the heap at the same time, set this space as space1a, store an object data var a = {no: 2, per: {name: "jack"}, per2: {name: "rose"}} / / copy attributes and values to a recursively, then assign values to temp, and then return out. The pointer address is not copied at this time. Function getDeep (obj) {var temp = Array.isArray (obj)? []: {}; for (var p in obj) {if (typeof obj [p] = = "object") {temp [p] = getDeep (obj [p])} else {temp [p] = obj [p]} return temp;} / / open a space b on the stack, store the pointer address of b, and set the pointer address to address3b. At the same time, b opens up a space in the heap and sets this space as D to store the object data of temp var b = getDeep (a); / / after a deep copy, modify the value of b, no matter the attribute value is modified, or the whole value replacement does not affect the original data ab.no = 1314 × b.per = [] b.per2 = {name: "Wang Wu"} console.log (a, b)

A shallow copy copies only the first layer, while a deep copy copies to the last layer. The result of the code is shown in the figure:

It can be understood that the original thing of an is completely copied and put into b, but the operation of b is only related to b. What was the value of an and what it is now? the modification of b has no effect on an at all.

Finally, the following figure shows a deep copy:

V. Summary

1. Assignment:

The basic data type is similar to that a student has a computer, and b student also wants it, so he bought an identical computer b for b classmate. How computer an and computer b are operated is a matter for students an and b respectively. Computer display does not affect each other (data results)

The quoted data type is that there is only one computer, which is placed in the computer room. Students an and b each operate the computer from the dormitory to the computer room, which can affect the computer display. In the eyes of students an and b, what the final result of this computer shows depends on the last student who operates the computer (data result).

two。 Shallow copy:

A student has a laptop and is equipped with a full set of equipment, a comfortable mouse, a mechanical keyboard with loud buttons, and so on. B classmate didn't have the money to buy a computer, but he really wanted to experience it, so he bought the same mouse and keyboard as classmate a. Then borrow a computer from classmate a to play. What's wrong with the mouse and keyboard of classmate an and classmate b? they don't affect each other's use. And the operation of the computer is who finally operated the computer, the computer is to show the last person's operating interface (data modification).

3. Deep copy:

A classmate has notebook + full set of equipment, b classmate envies unceasingly, let a classmate buy a whole set of exactly the same to oneself, but their respective use of the computer depends on their respective operation, the computer does not affect each other (data results).

This is the end of the concept of "javascript assignment, shallow copy, Deep copy". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.