Deep copy of JavaScript objects

The

data types of js can be divided into two major categories:

• Value type (original type):
  For exampleString and Number types are both value types.

• Reference Type:
  For example, Object, Array are reference types.

Let’s briefly talk about the difference between the two:
The most obvious difference is assignment. The assignment of the value type is a true copy assignment to the new variable:

var a, b = "issax";
a = b;
a +="_coder";
console.log(a);  //issax_coder
console.log(b);  //issax

Look at the above example, after assigning b to a, a, b The two variables are independent of each other. Changing their own values ​​will not affect the other. This is the value type.

Then look at the reference type:

var obj_i, obj_ii = { name: 'issax' };
obj_i = obj_ii;
obj_i['career'] = 'coder';
console.log(obj_i);  //Object {name: "issax", career: "coder"}
console.log(obj_ii);  //Object {name: "issax", career: "coder"}

Do you see that, after assigning the value of obj_ii to obj_i, changing the content of obj_i will also change the content of obi_ii. This is the reference type. Reference type variable storage is not the content itself, but a pointer to the content. Yes, when you assign a value, you actually just assign the pointer to a new variable. They all point to the same content. Why is the above situation not the same? It goes without saying.

Hold the grass, what gui am I talking about? I am talking about the deep copy of object [face covering]

Copy can be divided into shallow copy and deep copy Copy, after reading the above example, you will probably know what is shallow copy and what is deep copy by thinking about it.
The assignment process of ordinary value types is deep copy, while the assignment of reference types is shallow copy.

Since the object is a reference type, its normal assignment process is shallow copying. However, sometimes objects also need to be deeply copied. Hold the grass, what did I say about GUI? It is deep copying.

For example, when I was working on Vue two days ago, I encountered a requirement to sort by name. The odd number of clicks will sort the items, and the even number of clicks will restore the original sorting by Update time. This is not easy, just sort it every time. It’s really stupid to do this. Think about it. Except for the first sorting, which is meaningful, the second, third, fourth, fifth, sixth, seventh... what’s the point? They are all repeated. It’s not very useful to sort them every time. Is it a waste of performance? Then it’s time to store the sorted objects...Then it’s gg, the object is a reference type, I assigned it directly at the beginning, and then the scene was very embarrassing, the data didn’t move at all [face covering];
Do you want

to be recursively copied one by one? Then my object is similar to this:

Paste_Image.png

Hold the grass, the real recursive copy is sb, luckily I thought of this A good idea, the value type is deep copied, wouldn't it be enough to convert the reference type into a value type? [Ecstasy]

function deepCopy(sender){
  var temp = JSON.stringify(sender);
  return JSON.parse(temp);
}  
var obj_i, obj_ii = { name: 'issax' };
obj_i = deepCopy(obj_ii);
obj_i['career'] = 'coder';
console.log(obj_i);  //Object {name: "issax", career: "coder"}
console.log(obj_ii);  //Object {name: "issax"}

Paste_Image.png

The above is the detailed content of Deep copy of JavaScript objects. For more information, please follow other related articles on the PHP Chinese website!