Shallow copy and deep copy of js are often useful in the business, and the analysis of shallow copy and deep copy is endless, this article is the author’s understanding of deep copy and shallow copy, let’s consolidate the basic knowledge of js language.

The text begins…

Before reading the article, this article mainly explores the following aspects

Why are there shallow and deep copies?

What is a shallow copy, and what is a deep copy

What is the difference between shallow and deep copies

Write an example to support all of the above points

We know that in js the underlying data type is stored in stack memory, and the reference data type is stored in a heap memory referenced by the stack address. Why are the two types of data stored differently? This is a matter of value thinking, my guess is that the reference data type is a complex data structure, which is essentially a reference to the stack address, but this address points to another heap memory space, if they are all put together, it is not easy to distinguish whether you are the underlying data type or the reference data type.

First of all, they are all copies, one is shallow, one is deep, let’s first say the conclusion, shallow copy is a copy of the underlying data type, only one layer of copy, if the data encountered is reference data, then the shallow copy of the data and the original data is the same reference.

Deep copy, on the other hand, creates a new object when encountering a reference data type, traverses the original object, dynamically assigns values to the new object, and modifies the new object reference without affecting the property values of the original object

Let’s use a diagram to explain the two longer paragraphs above

The underlying data type is stored directly in stack address memory, while the reference data type is stored in a reference to the stack memory address, and the area that the reference actually points to is a heap memory space

Before we understand the shallow and deep copies, let’s first understand the next value copy

When I assign values to the original underlying data type and the reference data type

Use the following code example to illustrate the previous figure

Then run the node index.js from the execution results

Therefore, conclusions can be drawn

The assignment of the underlying data type, which is a copy of the value, will reopen up a stack space, and the new copy of the value modification will not affect the original data type

For the assignment of a reference data type, the original reference data and the newly assigned data point to the same address, and modifying the properties of the reference data will affect the original

The above is a copy of the values of the two data types, which seems to be a little far from the shallow copy

So let’s look at the shallow copy of the object extension

I used the es6 object extension to copy the original object, so what is the result at this point

I don’t know if not, at the first level of the reference data type, if this property is the underlying data type, then the modification will not affect the original value, if the property is a reference data type, then this layer structure will be a value copy, modify the newly assigned attribute, will affect the original object attribute

Let’s look at the following diagram to understand

Therefore, we can conclude that if the shallow copy encounters the underlying data type, modifying the new value will not affect the original value, but if the data is a reference data type, then the newly modified value will affect the original value, because the new modification is the same reference as the original modification.

So a shallow copy will only copy one layer, and if the data is a reference data type, it will actually directly reference the same piece of data.

Deep copy, as the name suggests, is produced from the performance level in order to modify the new data without affecting the original data.

Let’s take a chestnut

When I need to change the value of userInfo.fav.play1 and don’t want to affect the value of the original userInfo object, then you will think of deep copy, so how to copy deeply.

Scenario 1

Copy the object with JSON.stringify(data).

Outcome:

But we have to take into account that JSON.stringify has a kind of defect, it must be a json object, and there are other methods such as methods that will be automatically filtered. And if the json object is malformed, an exception will be thrown, so let’s look at another scenario.

Scenario 2

Using the proxy object idea, copy a copy of the original object and then assign a value

The end result is

But if there is an array in the data, it seems that the array is still the same value, that is, because the value is directly assigned

So you need to add one more condition, you need to judge the array

The result at this point

The above is further understood with a diagram

It’s really talented, and the deep copy turns out to be like this

With the above examples, we already know

Shallow copy If the data inside the copied object is the underlying data type, then direct copy, the new object modifies the value, will not affect the original value, if the copied object is a reference data type, then it will be a reference to a value, at this time the new copy object modifies its value will affect the original value. A shallow copy only copies one layer, and the internal reference data type of the copy is the same copy.

Deep copy is essentially that regardless of whether the original object value is the underlying data type or the reference data type, the value inside the object that I copied modifies the value inside the object does not affect the value of the original object

In addition, there is a little value copy, which is also an assignment, the underlying data type assignment, the newly modified data will not affect the original data, but if it is a reference data type, then the new copy of the value modification will affect the original data

Value copying (direct assignment operation), mainly distinguishing between the underlying data type and the reference data type, if it is the underlying data type, then the new value modification will not affect the original value, but if the reference data type, then the newly modified value will affect the original data type

Shallow copy, if the internal property of the copied object is a reference data type, then the object extender or Object.assign in es6 is a shallow copy operation, the new copy of the underlying data type modification will not affect the original value, but if the copy is a reference data type, then the new copy of the value and the original value is the same reference, the new value modification will affect the original value

Deep copy, in a word, the modified value of the newly copied object does not affect the original value

This article is an example of code example[1]

Finally, after reading and feeling rewarded, click a like, in the watch, forward, collection is equal to learning, welcome to pay attention to the Web Technology Academy, study well, every day upwards!

Click on one to see your best looks