How much does the depth copy know?

Guide language daily work development, assignment, copy is done every day, but some copy changes will change the content of the original elements, this share mainly from the copy before and after the copy data comparison to exchange discussion ~

background

As shown above, a simple assignment and modification causes the content of the original element to change. Does this happen in your projects? If not, I will share it to avoid such a situation in the future. The following is a further explanation of the circumstances under which assignment changes the value of the original object. First, take a look at data types and basic concepts.

JS data type

JS data types are divided into basic data types and object data types.

Basic data types: Data stored directly in the stack. (String, Number, Boolean, BigInt, undefined, Symbol, etc.)

Object data type: Stores references to the object in the heap. The actual data is stored in the heap memory. (mainly including array objects and object objects) as shown in the figure below:

Basic concept

Shallow copy

Concept: copy a pointer to an object, not the object itself, and the old and new objects still share the same memory

Deep copy

Concept: an identical object is created that does not share memory with the original object

The assignment

Assignment assigns the object’s address on the stack, not the data in the heap. That is, two objects point to the same storage space. If any object is changed, it is the content of the changed storage space. Therefore, the two objects are linked.

implementation

Shallow copy implementation

Now that you’ve seen the basics of storing and copying data types, let’s look at which cases, assignment and copying can exist completely independently of each other, and which cases change to the contents of the original object. A shallowCopy method is used to change the elements of the original data.

The results are as follows:

Conclusion: Name is the base data type, status is the object data type, shallow copy concept is only bitwise copy one layer, so the base data type is directly obtained the real data, while the object data type is the address reference of its real data. So myInfo and param in bindinfo point to the same storage space.

Shallow copy of existing methods (be careful when using them)

Object.assign()
Array.prototype.concat()
Array.prototype.slice()
Copy the code

For example:

Deep copy implementation

We also write a deepCopy method, which changes the elements of the original data as follows:

The results are as follows:

Summary: Name is the basic data type, of course, it goes without saying that status is the object data type, because the deep copy is a progressive copy, not just one layer, so the copied new object and the original object are completely independent, no matter which changes, will not change the content of the other object. So after deep copy, changing the status of the new object does not change the value of the original object.

Deep copy existing methods

Parse (json.stringify ()) _.clonedeep $.extend in the Lodash libraryCopy the code

For example,

A special case

Js always has some special cases, so be careful when developing. Deep copy does not copy all types, such as the symbol below, because it is special!

Symbol is a special type of data. A deep copy of symbol is also a shallow copy

conclusion

Assignment: Two points to the same object, and whenever one changes, the other changes.

Shallow copy: Although the object is not the same, if the original data is of the basic data type, the shallow copy is the deep copy and is independent of each other. Otherwise, linkage occurs if the object data type exists.

Deep copy: not the same object, the original data and new data are independent of each other, but pay attention to the symbol type

Original author: Ren Chunyan

Without consent, prohibit reprint!

For more exciting content, please pay attention to Tencent VTeam technical team wechat public account and video number