What is the difference between deep copy and shallow copy in JS

What is the difference between deep copy and shallow copy in JS? Specific code examples are needed

In JavaScript, the copy of an object is divided into two types: shallow copy and deep copy. Way. A shallow copy only copies the reference address of an object, while a deep copy creates a completely independent copy.

Shallow copy is to copy the reference address of the original object to the new object, and they point to the same memory space. When the properties of any one of the objects are modified, the corresponding properties of the other object will also be modified. This is because they share the same memory address.

Deep copy is to create a brand new object and copy all the attributes in the original object to the new object one by one. The new object and the original object have no influence on each other. Even if you modify the properties of one object, the properties of the other object will not be affected.

Below, I will illustrate the difference between shallow copy and deep copy through specific code examples.

First, let’s look at an example of shallow copy:

let obj1 = {name: "Alice", age: 20};
let obj2 = obj1;

obj1.age = 21; 

console.log(obj1); // {name: "Alice", age: 21}
console.log(obj2); // {name: "Alice", age: 21}

In the above code, we implement it by assigning obj1 to obj2 A shallow copy. When the age attribute of obj1 is modified, the age attribute of obj2 is also modified because they point to the same memory address. .

Next, let’s look at an example of deep copy:

function deepClone(obj) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }
    
    let clone = Array.isArray(obj) ? [] : {};
    
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            clone[key] = deepClone(obj[key]);
        }
    }
    
    return clone;
}

let obj1 = {name: "Alice", age: 20};
let obj2 = deepClone(obj1);

obj1.age = 21;

console.log(obj1); // {name: "Alice", age: 21}
console.log(obj2); // {name: "Alice", age: 20}

In the above code, we define a deepClone function to implement deep copy. This function first determines whether the incoming parameter is null or not an object type. If so, it returns directly, otherwise it creates an empty object clone of the same type as the incoming object. Then by traversing the properties of the original object, recursively calling the deepClone function to deeply copy each property, and assign it to the corresponding clone property. Finally, the new object clone is returned.

By using the deepClone function, we implement a deep copy of obj1. Even if the age attribute of obj1 is modified, the age attribute of obj2 remains unchanged. This is because they are two complete independent object.

To sum up, shallow copy only copies the reference address of the object, while deep copy creates a completely independent copy. Deep copy can ensure that the original object will not be affected when modifying the copy object, and is suitable for copying objects with nested structures. It should be noted that in actual development, deep copy may cause large performance overhead, so it is necessary to choose an appropriate copy method based on the actual situation.

The above is the detailed content of What is the difference between deep copy and shallow copy in JS. For more information, please follow other related articles on the PHP Chinese website!