Explicación detallada de la copia profunda y la copia superficial de JS

copia profunda

1. Agregue un puntero y genere una nueva memoria para que el puntero recién agregado apunte a la nueva memoria
2. Con la copia profunda, al liberar memoria, no habrá error de liberar repetidamente la misma memoria durante la copia superficial.
3. Par de copia profunda , functionestos tres objetos se perderánundefinedSymbol()

let str = JSON.stringify(form) // form对象被拷贝为一个字符串
let newform12 = JSON.parse(str ); // str 字符串转为一个新的对象

copia superficial

1. En el caso de los punteros, una copia superficial solo agrega un puntero a la memoria existente y no crea nueva memoria.
2. Solo se copian los objetos de primer nivel y los objetos de nivel profundo no se copian (el nombre de usuario de primer nivel en la instancia newForm3cambia pero el formulario de datos de origen permanece sin cambios, y el formulario de origen de mensaje de atributo de segundo orden ha cambiado)

let newForm3 = Object.assign({
    
    }, form);  

ejemplo

   let form = {
    
    
      username: "张三",
      password: "123456",
      order: {
    
    
        id: 12,
        msg: "this is a test data!",
      },
    };
    
    // 1.常规赋值   
    // 原数据已被改变
    console.log(form);//{username: "张三", password: "123456", order: {id: 12, msg: "this is a test data!"}}
    let newform1 = form;
    newform1.username = "李四";
    console.log(form);//{username: "李四", password: "123456", order: {id: 12, msg: "this is a test data!"}}
 

    // 2.深拷贝  
    // 原数据form没有改变
    let newForm2 = JSON.parse(JSON.stringify(form));
    console.log("深拷贝", newForm2);
    newForm2.username = "王五";
    newForm2.order.msg = "这是深拷贝";
    console.log(newForm2); //{username: "王五", password: "123456", order: {id: 12, msg: "这是深拷贝"}}
    console.log(form); //{username: "张三", password: "123456", order: {id: 12, msg: "this is a test data!"}}

    // 3.浅拷贝
    // 原数据form 第一层属性没有改变，第二次order的已被改变
    let newForm3 = Object.assign({
    
    }, form);
    newForm3.username = "王五";
    newForm3.order.msg = "这是浅拷贝";
    console.log(newForm3); //{username: "王五", password: "123456", order: {id: 12, msg: "这是浅拷贝"}}
    console.log(form); //{username: "张三", password: "123456", order: {id: 12, msg: "这是浅拷贝"}}

Resumir

Si necesita copiar los datos de un objeto de varias capas , use copia profunda ; si es un objeto de una sola capa , se recomienda usar copia superficial