First, let's introduce the data types of JavaScript:

Common data types: string, number, undefined, Null, Boolean

Reference data type: object(function, Array, Date)

  Describe their storage methods:

Difference between shallow copy and assignment:

The first is assignment: (look at the code)

    let person = {name:'Peng Yuyan'} 

    let person1 = person
    person1.name = 'Hu Ge'
    console.log(person1);

  Output:

At this time, assign person to person1, and person1 changes the name to "Hu Ge", so the data in memory changes

  (see the picture):

  At this point, they both point to the same address, and the latter changes the value of the former

 ------------------------------------------------------------------------------------------------------------------

At this point, let's talk about shallow copy

Shallow copy first creates a new object (see the code):

Supplement: the hasOwnProperty() method is used to detect whether a property is an object's own property, not inherited from the prototype chain

let person = {name:'Peng Yuyan'}  
function shallowCopy(source){
        let newObj = {}
        for(var i in source){
            if(source.hasOwnProperty(i)){
                newObj[i]=source[i]
            }
        }
        return newObj
    }

    var person1 = shallowCopy(person)
    person1.name='Hu Ge'

    console.log("person",person);
    console.log("person1",person1);

Output:

At this time, the two values are different,

This is the difference between shallow copy and assignment

Shallow copy needs to create a new object and point to a new place, but there is no assignment

  Copy value: if the attribute is a general data type, the copied value is the value of the general data type

                If the data type is applied to the number of objects, the address in memory is copied

Let's look at another piece of code (shallow copy):  

 let person = {name:'Peng Yuyan',hobby:['motion','sing','Swimming']} 
 function shallowCopy(source){
        let newObj = {}
        for(var i in source){
            if(source.hasOwnProperty(i)){
                newObj[i]=source[i]
            }
        }
        return newObj
    }
    var person1 = shallowCopy(person)
    person1.name='Hu Ge'
    person1.hobby[1]='having dinner'
    console.log("person",person.hobby);
    console.log("person1",person1.hobby);

Output:

At this time, the hobby in person and person1 becomes the same value. Why does this happen

        1. As I just said, if the copied data type is a general data type, the copied data type is the value of the general data type,

What is copied is the reference data type, and what is copied is the address in memory,

        2. Because a hobby is an array, the copied address is the address in its memory. At this time, person1 and person point to the same memory address. Therefore, changing the value of person1 will change the original data

In short, if the shallow copy encounters a reference data type, the data before and after affect each other

 -----------------------------------------------------------------------------------------------------------------

  Deep copy:

The difference between deep copy and shallow copy: if the attribute is a reference data type, it will open up a new space

Let's look at the code first

    function deepClone(obj1={}){
        if(typeof obj1==null || typeof obj1!=='object'){
            return obj1
        }
        let newObj;
        //Determine whether an object or an array
        if(obj1 instanceof Array){
            newObj=[]
        }else{
            newObj={}
        }
        for(let i in obj1){
             newObj[i]=obj1[i]
        }
        return newObj
    }

    let obj = {
        age:30,
        name:'Peng Yuyan',
        hobby:['motion','sing','Swimming']
    }
    let obj2 =deepClone(obj)
    obj2.name='Hu Ge'
    obj2.hobby[1]='having dinner'
    console.log(obj2,obj);

Output:

  If the code is written in this way, the basic data type can be copied without affecting the original data,

However, if it is a reference data type, it will still affect the original data, so we need to use recursive functions

  function deepClone(obj1={}){
        //Judge whether it is a null value and not an object object. Otherwise, return obg1
        if(typeof obj1==null || typeof obj1!=='object'){
            return obj1
        }
        let newObj;
        if(obj1 instanceof Array){
            newObj=[]
        }else{
            newObj={}
        }
        for(let i in obj1){
            if(obj1.hasOwnProperty(i)){
                newObj[i]=deepClone(obj1[i]) //Here, the recursive function is called, and the judgment will be made and the recursion will be exited
            }
        }
        return newObj
       
    }

    let obj = {
        age:30,
        name:'Peng Yuyan',
        hobby:['motion','sing','Swimming']
    }
    let obj2 =deepClone(obj)
    obj2.name='Hu Ge'
    obj2.hobby[1]='having dinner'
    console.log(obj2,obj);

  Output:

At this point, deep copy is realized

------------------------------------------------------If there is something wrong, please leave a message