Analysis of JS assignment and depth copy

Speaking of shallow copy, memory and data types have to be mentioned here.

In JS, data types are divided into basic data types and reference types. There are six basic data types (String, Number, Boolean, undefined, NULL, symnol). The reference type is Object (subdivided into Array, Object, date……) .

So let’s talk about memory. Memory is divided into stack memory, which stores the addresses of basic data types and reference types, and heap memory, which stores reference data types.

One, the assignment

What is assignment? Assignment is divided into two types: passing a value and passing an address. As the name implies, the former passes a value of a primitive data type, such as the value of a variable, string, or undefined, while the latter passes the address of a reference type. Simply create a new space in stack memory and copy the values you need. In fact, this is not true. For values, if you assign variable A to variable B, only the value is copied. When you change b, A is not affected.

For addressing, however, since the address is copied as a reference type, no matter how many times it is copied, the memory block in the heap to which it refers will not change. In other words, the two addresses that are copied refer to the same memory block. No matter which object is changed, their values will change together, as shown in the figure below:

Second, the copy

What is a copy? What’s the difference between copy and assignment? To put it simply, the most fundamental difference between the two is that the object of operation is different. The assignment operation is the basic data type, while the copy operation is the reference data type. In essence, the former is the operation of stack memory data, while the latter is the operation of heap memory data.

So now suppose we have an object that looks like this:

var obj={name:"tom",sex:"man",obj1:{age:15}} 
Copy the code

2.1 shallow copy

A shallow copy is a copy of the first layer of the object, that is, only the outermost basic data type, and only the addresses of other reference types in the object.

{name:" Tom ",sex:"man",obj1:{obj1 address}}Copy the code

At this point, you can change the name, sex, and the source data will not be affected, but when you change the contents of obj1, the obj1 in the source data will also change

2.2 deep copy

Deep copy is very simple to understand. It simply copies a new object, regardless of the number of layers of the source data, into the new object

Third, implementation method

3.1 shallow copy

<1> Pass ES6 object.assign()

var a={name:"tom"}; var b=Object.assign({},a); 
Copy the code

<2> Extend the operator

var a={name:"tom"}; var b={... a};Copy the code

<3>for… in…

let copy=(obj)=>{ 
    let result={};  
    for(var a in obj){ 
        result[a]=obj[a]; 
    }  
    return result; 
} 
Copy the code

3.2. Deep copy

<1> Deconstruct the assignment

let a={age:10,address:{city:"shanghai"}}; let b={... a,address:{... a.address}}Copy the code

< 2 > recursion

function deep(obj){ let result=typeof obj.splice= = ='function'? [] : {}; if(obj&&typeof obj = = ="object"){ for(let key in obj){ if(obj[key]&&typeof obj[key]= = ="object"){ result[key]=deep(obj[key]); }else{ result[key]=obj[key]; } } return result; } return obj; }Copy the code