Explication détaillée de la copie profonde JS et de la copie superficielle

copie profonde

1. Ajoutez un pointeur et générez une nouvelle mémoire afin que le pointeur nouvellement ajouté pointe vers la nouvelle mémoire
2. Avec la copie complète, lors de la libération de la mémoire, il n'y aura aucune erreur de libération répétée de la même mémoire pendant la copie superficielle.
3. Paire de copie profonde function, undefined, Symbol()ces trois objets seront perdus

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

copie superficielle

1. Dans le cas des pointeurs, une copie superficielle ajoute simplement un pointeur à la mémoire existante et ne crée pas de nouvelle mémoire
2. Seuls les objets de premier niveau sont copiés et les objets de niveau profond ne sont pas copiés (le nom d'utilisateur de premier niveau dans l'instance newForm3change mais le formulaire de données source reste inchangé et le formulaire source msg d'attribut de second ordre a été modifié)

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

exemple

   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: "这是浅拷贝"}}

Résumer

Si vous avez besoin de copier les données d'un objet multicouche , utilisez la copie profonde ; s'il s'agit d'un objet monocouche , il est recommandé d'utiliser la copie superficielle