Mandatory interview questions: 1. shallow copy and deep copy_ Shallow copy

Shallow copy

start

• In the process of working , Copy a copy of the data , Used for logical processing , It is a common scene .
• Take some time to summarize and learn relevant knowledge

assignment =

1. Simple data type , assignment , It's about value

var a = ' Hello '

var b = a
console.log(1, b)

b = ' Modify the value of simple type '
console.log(2, b, a)

// 1  Hello 
// 2  Modify the value of simple type   Hello  

2. Complex data type , assignment , It's a reference address

var a = {
    
  name: ' Hello '
}

var b = a
console.log(1, b)

b.name = ' Modify the value of complex type '
console.log(2, b, a)

// 1 { name: ' Hello ' }
// 2 { name: ' Modify the value of complex type ' } { name: ' Modify the value of complex type ' }

summary

Simply speaking , We use Assignment operator =, When copying values of complex types , The copy is the reference address , operation The copied object will affect the original object .

Shallow copy

But often at work , It is not expected that the operation of the copied data will affect the original data .

At this time, we need to make a copy , New complex data types come out , For our use .

Solution ：

• Shallow copy ： Shallow copy is an application that copies objects , When the attribute of an object is a reference type , The essence is to copy its reference , When the reference value changes , The copy value also changes .
• Deep copy ： Another piece of memory is requested for deep copy , The contents of the copied object are exactly the same as the original , Change the original object , The copy object also changes .

Talk about my own understanding ：

Shallow copy ： Copied an object , But only the first layer of the copied object , When the attribute of an object is a reference type , This attribute of the copy , It is still the address reference of the copy .

Deep copy ： A deep copy copies all the attributes , And copies the dynamically allocated memory that the attribute points to . A deep copy occurs when an object is copied with the object it references .

Common shallow copies

• Object.assgin

    var obj1 = {
    
      name: ' Start ',
      version: 1,
      other: {
    
        say: ' Other comments '
      }
    }

    var obj2 = Object.assign({
    }, obj1)

    console.log(1, obj2)
    // 1 { name: ' Start ', version: 1, other: { say: ' Other comments ' } }

    obj2.name = ' Modify the first level attribute '
    obj2.other.say = ' Modify this object, modify the second level properties '

    console.log(2, obj2, obj1)
    // 2 { name: ' Modify the first level attribute ', version: 1, other: { say: ' Modify this object, modify the second level properties ' } } { name: ' Start ', version: 1, other: { say: ' Modify this object, modify the second level properties ' } }

    /*  Shallow copy  */

• Expand operator ...

var obj1 = {
    
  name: ' Start ',
  version: 1,
  other: {
    
    say: ' Other comments '
  }
}

var obj2 = {
     ...obj1 }

console.log(1, obj2)
// 1 { name: ' Start ', version: 1, other: { say: ' Other comments ' } }

obj2.name = ' Modify the first level attribute '
obj2.other.say = ' Modify this object, modify the second level properties '

console.log(2, obj2, obj1)
// 2 { name: ' Modify the first level attribute ', version: 1, other: { say: ' Modify this object, modify the second level properties ' } } { name: ' Start ', version: 1, other: { say: ' Modify this object, modify the second level properties ' } }

/*  Shallow copy  */

• Array.prototype.slice()

var obj1 = [' Start ', {
     say: 'old' }]

var obj2 = Array.prototype.slice.call(obj1)

obj2[0] = ' Modify the first level attribute '
console.log(1, obj2)
// 1 [ ' Modify the first level attribute ', { say: 'old' } ]

obj2[1].say = ' Modify this object, modify the second level properties '
console.log(2, obj2, obj1)
// 2 [ ' Modify the first level attribute ', { say: ' Modify this object, modify the second level properties ' } ] [ ' Start ', { say: ' Modify this object, modify the second level properties ' } ]

/*  Shallow copy  */