Front-end interview: Difference between shallow copy and deep copy?

So good evening everyone, I am the main lecturer this evening, I am Rabbit Brother.

 

We are often asked the difference between shallow copy and deep copy in interviews, and this question is also being asked in the group, so today I will write a blog to explain it.

 

1. Shallow copy

Shallow copy refers to the value copy of the basic type, and the address copy of the object type .

How to say, what are the basic types?

In js, the basic types we know are strings, numbers, and booleans.

When we write code like this, it is a shallow copy.

var a = 1;
var b = a; //浅拷贝
b = 2;     //改变b的值，并不会影响到a，因为浅拷贝对基本类型而言就是值拷贝
console.log(a);

a is still 1, it has nothing to do with b.

The same principle applies to objects. There are also object types (also called reference data types) in JavaScript, and a shallow copy of an object type just copies the address.

var p1 = {
    name: 'jack'
}

var p2 = p1;
p2.name = 'rose';

console.log(p1);

p2 saves the exact same memory address as p1, just like if you go to assign a key to Zhang San, and Zhang San holds the key, he can go to your house and drink the yogurt in the refrigerator.

2. Deep copy

A deep copy means that in addition to copying the value of the basic type, the object type is also completely copied.

An object is fixed in memory. If we want to make a deep copy of it, the only way is to create a new object, and the value in it completely replicates the original object.

Still the example just now, we slightly modified

var p1 = {
    name: 'jack'
}

var p2 = {
    name: p1.name
};
p2.name = 'rose';

In this way, when we transform p2, it will not affect p1. This is a deep copy.

We can implement deep copy in this way, but if there are too many attributes, it will be very cumbersome. Let's talk about how to implement the general method of deep copy?

3. Deep copy Object.assign()

Object.assign()It is a method that can perform deep copying on non-nested objects. If there is nesting in the object, its behavior on the nested object becomes a normal shallow copy. If there is no nesting, this method can be used.

var p1 = {
    name: 'jack'
}

var p2 = {}

Object.assign(p2,p1);

There is a similar method, which is to convert with JSON

var p1 = {
    name: 'jack',
    age:12
}

var p2 = JSON.parse(JSON.stringify(p1));

p2.name = 'rose';

In actual development, this method may be used more, such as converting some data into json and storing it in the local cache. When it is needed, we will deserialize it.

4. Deep copy recursion

function deepCopy(dest,src){
  var dest = dest || {};
  for(var key in src){
    //如果对象的属性又是对象，则递归处理
    if(typeof src[key] === "object"){ 
        dest[key]= (src[key].constructor === Array)?[]:{}; 
        deepCopy(dest[key],src[key]); 
    }else{
        dest[key]=src[key];  
    }
  }
  return dest;
}

test:

var p1 = {
    name: 'jack',
    age:12,
    toy: {
        name:'car'
    }
}

var p2 = deepCopy({},p1);

It can be seen that the operation of p2 does not affect p1, which is a deep copy of the recursive method. 

That's all for today's sharing, and you are welcome to come to our learning qun to communicate~~