JavaScript deep copy and shallow copy

1. Shallow copy

The shallow copy only copies one level of the simplest data type, and the deeper object level only copies the address. The address points to the same memory space . If you change the value of the deep object of the object after copying, the value of the deep object of the object before copying will also change because the address is the same.
Here is an example of a shallow copy:

var oldObj = {
    
    
    id: 1,
    name: 'Jack',
    msg: {
    
    
        age: 18
    }
};
var newObj = {
    
    };
// 遍历旧对象，依次拷贝
for (var k in oldObj) {
    
    
    newObj[k] = oldObj[k];
}

Output the copied object:

console.log(newObj);

As you can see, the copy has been completed.
But change the value of the deep object in the new object , and then output the old object, and find that the value of the deep object of the old object has also changed :

newObj.msg.age = 20;
console.log(oldObj);

---

In addition, ES6 syntax provides a shallow copy method Object.assign(target, sources) , where::
targetobject after
sourcescopy: object before copy
For example, in this example:

Object.assign(newObj, oldObj);
console.log(newObj);

Similarly, a shallow copy can also be done .

2. Deep copy

Deep copy copies multiple layers, each level of data will be copied, and deeper object levels will open up new memory space for copying . The new and old objects have different data addresses at the deep object level , so the two are independent. Changing the value of the new object will not affect the old object .
Here is an example:

var oldObj = {
    
    
    id: 1,
    name: 'Jack',
    msg: {
    
    
        age: 18
    },
    color: ['pink', 'red']
};
var newObj = {
    
    };
// 封装函数 
function deepCopy(newobj, oldobj) {
    
    
    for (var k in oldobj) {
    
    
        // 判断我们的属性值属于那种数据类型
        // 1. 获取属性值  oldobj[k]
        var item = oldobj[k];
        // 2. 判断这个值是否是数组
        if (item instanceof Array) {
    
    
            newobj[k] = [];
            // newobj[k]是属性，item是值
            deepCopy(newobj[k], item)
        } else if (item instanceof Object) {
    
    
            // 3. 判断这个值是否是对象
            newobj[k] = {
    
    };
            deepCopy(newobj[k], item)
        } else {
    
    
            // 4. 属于简单数据类型
            newobj[k] = item;
        }

    }
}
deepCopy(newObj, oldObj);
console.log(newObj);

Get new objects:

If you change the new object in the agevalue of the old object in agethe value does not change , it will not be affected:

newObj.msg.age = 20;
console.log(newObj);
console.log(oldObj);

3. Summary

1. The shallow copy only copies one level, and the deeper object level only copies the address.
2. Deep copy copies multiple layers, each level of data will be copied.

The above is the understanding gained from personal study. If there is something wrong, please comment and correct it.