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

This article mainly explains "how to use deep copy and shallow copy of JavaScript". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use JavaScript deep copy and shallow copy.

Copy (also known as clone, copy, etc.), but it is divided into deep copy and money copy.

In fact, this question is sometimes very simple, if you can't figure it out, it may be a little roundabout, but it's much easier to understand than closures and so on.

Why does this concept exist? Let me give you an example.

Var person= {name: "Zhang San", age:22} var person1=person;console.log (person); console.log (person1)

It seems that it can be copied, but if you manipulate the property value of person1, the value of the person property will also change.

Person1.name= "Li Si"; console.log (person); console.log (person1)

In fact, this is easy to understand, that is, the pointer addresses of both objects point to the same location of stack memory. I explained what a reference data type is when I explained the reference data type.

Add:

Object. Attributes and objects [attributes] are actually the property values of operands, just two different ways to write them.

That means that this way of pointer assignment is not a copy, then what is a copy, that is, a new object uses all the properties of an object, but is not affected by each other.

This understanding makes it clear that the essence of a copy is to circularly assign the properties of an object to a new object.

Is there any difference between shallow copy and deep copy? to be honest, what is the difference between shallow copy and deep copy?

In fact, there is no difference in nature, the biggest difference is the conditions considered and the types of attributes in the copy process.

The old rule is to look at the code first.

Shallow copy var person= {name: "Zhang San", age:22} var person1= {}; for (key in person) {console.log (key); person1 [key] = person [key];} console.log (person); console.log (person1)

Person1.name= "Li Si"; console.log (person); console.log (person1)

You can see that there is no influence on each other, but there is a new problem involved, that is, the properties of person objects are basic data types, what if they are reference types? Such as arrays, what about objects?

Var person= {name: "Zhang San", age:22, son: {firstSon: "Zhang Damao"} var person1= {}; for (key in person) {console.log (key); person1 [key] = person [key];} console.log (person); console.log (person1)

Now modify the delivery properties of person1.

Person1.son= {firstSon: "Li Damao"}; console.log (person); console.log (person1)

Doesn't it seem to affect each other in this way? But this one mentioned the object before. Attribute = this is tantamount to overwriting the property assigned to person1.son, which will naturally disconnect the influence of references to each other. After all, the two addresses are different. But what about the following changes?

Person1.son.secondeSon= "Li Damao"; console.log (person); console.log (person1)

Surprise or surprise, or influence each other, this time requires a new operation, that is, deep copy, to put it bluntly, the attribute value may be used as a reference type.

Add:

If there is an attribute value on the prototype of person, it will also be taken by person1 and assigned to person1. As mentioned earlier, hasOwnProperty will be used to determine whether it belongs to its own attribute value.

Deep copy

In fact, I believe that the difference between deep copy and shallow copy is almost understood here, just considering the type of attribute value.

/ / it is added above that the values on the prototype will also be copied, in order to make it easier to add attributes directly to the last Object of the object's prototype chain. Object.prototype.address= "guess"; var person= {name: "Zhang San", age:22, son: {firstSon: "Zhang Damao"}} strtype=Object.prototype.toString;var person1= {} / / to facilitate this place, use the recursive method function coleFun (origin,target) {/ / prevent the target object from having an attribute target=target | {} for (key in origin) {if (origin.hasOwnProperty (key)) if (strtype.call (if) = "[object Object]") {target [key] = {} Target [key] = coleFun (keys [key], target [key])} else {target [key] = thanks [key];}} return target;} person1=coleFun (person,person1) console.log (person); console.log (person1)

There is no problem in the result. Try to modify the attribute value.

Person1.son.secondeSon= "Li Damao"; console.log (person); console.log (person1)

There's no problem now.

The so-called deep copy, to put it bluntly, is to consider whether the attribute value will have a reference type, and then copy it. If you don't understand the above code, you may need to review the difference between reference data and basic data, as well as this pointing, and how to determine data types. We have talked about all the previous articles, so you can take a look at them.

Supplement

A friend asked in the comments section that if you use the JSON method in JavaScript to copy data, is it a deep copy or a shallow copy?

In fact, this is easy to prove, that is to directly copy an object with a reference data type, and then determine whether it will affect each other.

First of all, let's take a look at the two methods and their effects:

The method acts as JSON.parse () to convert a JSON string to a JavaScript object. JSON.stringify () is used to convert the JavaScript value to a JSON string.

Then the code demonstrates:

Var person= {name: "Zhang San", age:22, son: {firstSon: "Zhang Damao"}} var str=JSON.stringify (person); var person1=JSON.parse (str); console.log (person); console.log (person1)

At least there is no problem with the copy so far.

Start testing now to see if they influence each other.

Person1.son.secondeSon= "Li Damao"; console.log (person); console.log (person1)

It can be seen that there is no interaction, it is to copy through JOSN is actually a common way of JavaScript, after all, it is much more convenient than their own writing. Its essence is to convert the object into a string in JSON format, and regenerate it into an object through the string, so it is also a deep copy.

At this point, I believe you have a better understanding of "how to use JavaScript deep copy and shallow copy". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.