Clarify deep and shallow copies in JS

By Manjula Dube

Translator: Front-end wisdom

Source: Medium

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

Shallow copy

Shallow copy is a bit-by-bit copy of an object. Creates a new object with an exact copy of the value in the original object. If any field of an object is a reference to another object, only the reference address is copied, that is, the memory address is copied.

In plain English, a shallow copy is a copy of an object’s address without creating a new stack. The result of the copy is that two objects point to the same address. If you change the properties of one object, the properties of the other object will change.

Deep copy

The deep copy copies all fields and dynamically allocated memory to which the fields point. Deep copy occurs when an object and the object it references are copied.

In plain English, deep copy opens up a new stack where two objects correspond to two different addresses, and changing the properties of one object does not change the properties of the other.

Look, See, See

Shallow copy: It copies a reference to X into Y. Therefore, the addresses of X and Y are the same, that is, they point to the same memory location.

Deep copy: Copies all the members of X, allocates different memory locations for Y, and then allocates the copied members to Y for deep copy. That way, if X disappears, Y is still valid in memory.

Consider the following code:

Var employeeDetailsOriginal = {name: '小智', age: 18, Profession:' 小智'};Copy the code

Suppose you want to create a copy of this object, so that even if the original value is changed, you can still get the value of the original object through the copy.

I would do this:

var employeeDetailsDuplicate = employeeDetailsOriginal; / / shallow copyCopy the code

If we change a value:

Dazhi wang employeeDetailsDuplicate. Name = ' ';Copy the code

The name property of the original employeeDetailsOriginal object will also change because it is a shallow copy. So we can’t get the value of the original object. So this copying is wrong.

However, you can create a deep copy copy by creating a brand new variable using the attributes of the original employeeDetailsOriginal variable.

var employeeDetailsDuplicate = { name: employeeDetailsOriginal.name, age: employeeDetailsOriginal.age, Profession: employeeDetailsOriginal.Profession }; / / copyCopy the code

Now, if you change employeeDetailsDuplicate. The name, it will only affect employeeDetailsDuplicate, without affecting employeeDetailsOriginal.

Talk about the Object. The assign ()

Object.assign() is a common method that is simply a shallow copy. But it has a special feature, which is that it can handle deep copies of the first layer.

Var employeeDetailsOriginal = {name: 'employeeDetailsOriginal ', family: {name:' employeeDetailsOriginal '}}; var employeeDetailsDuplicate = Object.assign({}, employeeDetailsOriginal ); EmployeeDetailsDuplicate. Name = 'dazhi wang employeeDetailsDuplicate. Family. Name =' back-end family 'console. The log (employeeDetailsOriginal ); }} console.log(employeeDetailsDuplicate); // {name: "front-end xiaochi ", family: {name:" back end family "}} console.log(employeeDetailsDuplicate); // {name: "wang daye chi ", family: {name:" backend "}}Copy the code

In the example above, the value of the name attribute does not change, but the value of the name of the family attribute does.

How to implement deep copy

The only way to do that is to clone the object.

For simple JSON objects, the simplest method is var objectIsNew = json.parse (json.stringify (objectIsOld)); Var objectIsNew = jquery.extend ({}, objectIsOld); Var objectIsNew = jquery.extend (true, {}, objectIsOld);Copy the code

A pure JS method to deeply copy objects (not the best method)

function keepCloning(objectpassed) {
  if (objectpassed=== null || typeof objectpassed!== 'object') {
    return objectpassed;
  }
  
  // 临时存储原始的obj的构造
  var temporary_storage = objectpassed.constructor(); 
  for (var key in objectpassed) {
    temporary_storage[key] = keepCloning(objectpassed[key]);
  }
   return temporary_storage;
}

var employeeDetailsOriginal = {  
  name: '前端小智', 
  age: 18, 
  Profession: '前端开发' 
};

var employeeDetailsDuplicate = (keepCloning(employeeDetailsOriginal));

employeeDetailsOriginal.name = "前端大治";

console.log(employeeDetailsOriginal);
console.log(employeeDetailsDuplicate);
Copy the code

conclusion

Knowing deep copy isn’t just for interview questions, it’s also very useful in practical development. A pile of data received from the background, for example, you need to do to the heap data operation, but many people development situation, you are unable to clear this heap data to see if there is other functions also need to use, modify directly may lead to hidden problem, a deep copy can help you more safe and comfortable to manipulate data, according to the actual situation to use deep copy, probably is this meaning.

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Original text: we-are.bookmyshow.com/understandi…

communication

This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview.