Copia profunda y copia superficial de JavaScript

1. Copia superficial

La copia superficial solo copia un nivel del tipo de datos más simple, y el nivel de objeto más profundo solo copia la dirección. La dirección apunta al mismo espacio de memoria . Si cambia el valor del objeto profundo del objeto después de copiar, el valor del objeto profundo del objeto antes de copiar también cambiará porque la dirección es la misma.
A continuación, se muestra un ejemplo de una copia superficial:

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

Salida del objeto copiado:

console.log(newObj);

Como puede ver, la copia se ha completado.
Pero cambie el valor del objeto profundo en el nuevo objeto , y luego genere el objeto antiguo, y descubra que el valor del objeto profundo del objeto antiguo también ha cambiado :

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

---

Además, la sintaxis de ES6 proporciona un método de copia superficial Object.assign(target, sources) , donde ::
targetobjeto después de
sourcescopia: objeto antes de copia
Por ejemplo, en este ejemplo:

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

Del mismo modo, también se puede hacer una copia superficial .

2. Copia profunda

La copia profunda copia varias capas, se copiará cada nivel de datos y los niveles de objetos más profundos abrirán un nuevo espacio de memoria para copiar . Los objetos nuevos y antiguos tienen direcciones de datos diferentes en el nivel de objeto profundo , por lo que los dos son independientes. Cambiar el valor del nuevo objeto no afectará al objeto antiguo .
Aquí hay un ejemplo:

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);

Obtener nuevos objetos:

si cambia el nuevo objeto en el agevalor del objeto antiguo en ageel valor no cambia , no se verá afectado:

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

3. Resumen

1. La copia superficial solo copia un nivel, y el nivel de objeto más profundo solo copia la dirección.
2. La copia profunda copia varias capas, se copiará cada nivel de datos.

Lo anterior es mi entendimiento personal. Si hay algo mal, por favor comente y corríjame.