During the interview, an interviewer asked if ES6 deconstruction assignment is a deep copy or a shallow copy. Here is a summary.

ES6 destruct assignment, as you probably all know, is that you can quickly fetch the value of an array or object; Let’s start with a use case:

Learn more about deconstructing assignment: es6.ruanyifeng.com/#docs/destr…

So, is ES6’s deconstruction assignment deep copy or shallow copy?

Let’s first look at the definitions of deep and shallow copies

Deep copy: Changing the value of a new variable does not affect the value of the original variable. By default, basic data types (number, String, NULL, undefined, Boolean) are deep-copied.

Shallow copy: Changing the value of a new variable affects the value of the original variable. By default, reference types (Object) are shallow copies.

Let’s start with an example of a primitive type that uses an equal sign directly

Log (' output: ',stu) // Output: jack console.log(' output: ',user) // Output: SiriCopy the code

As can be seen from the above example:

Stu value changes do not affect the user, so the basic data types, which are assigned directly with equal signs, are also deep copies;

Let’s look at another example of a reference type that assigns directly to an equal sign

let obj1 = {
  name:'siri',
  age:18
}
let obj2 = obj1

obj2.name = 'jack'
console.log('obj1',obj1)
console.log('obj2',obj2)
// obj1 {name: "jack", age: 18}
// obj2 {name: "jack", age: 18}

Copy the code

In the example above, we can see that obj1 is assigned to obj2 and name is changed in obj2. (Because they’re referencing the same address! The copy does not create a separate memory for obj2. Instead, it copies a pointer to data from obj1 to obj2.

Let’s return to deconstructing assignment after the above example

Modify the top destruct assignment code to assign names and ages

const userInfo = { name:'siri', Age :18} let {name,age} = userInfo name = 'jack' age = 16 console.log(' print userInfo',userInfo) // Print userInfo {name: "siri", age: 18}Copy the code

We found that the userInfo data has not been changed, some students will say that the deconstructed assignment seems to be a deep copy ？？？？？

Let’s modify the code again

const userInfo = { name:'siri', age:18, detail:{ qq:'1', email:'[email protected]' } } let {name,age,detail} = userInfo name = 'jack' age = 16 detail.qq = "2" The console. The log (' print the userInfo ', the userInfo)Copy the code

Print information:

It is found that the object assigned by deconstruction has modified the QQ data in the original object detail, so it is still a shallow copy.

# # # :

  • Destruct assignment, if the original object is a one-dimensional array or object, which is essentially an equal assignment to the basic data type, then it is a deep copy;

  • If it’s a multi-dimensional array or object that essentially assigns a value to the input equal sign of a reference type, it’s a shallow copy;

Conclusion: Deconstruction assignment is shallow copy (because it really doesn’t work as deep copy for multidimensional arrays or objects);

Deep copy implementation method

The essence of the assignment is to break the object down into primitive data types.

function deepClone(source){ const targetObj = source.constructor === Array ? [] : {}; For (let keys in source){if(source.hasownProperty (keys)){if(source[keys] && typeof Source [keys] === 'object'){constructor === Array? [] : {}; targetObj[keys] = deepClone(source[keys]); }else{// If not, set targetObj[keys] = source[keys]; } } } return targetObj; }Copy the code