JS 深拷贝与浅拷贝详解

深拷贝

1. 增加一个指针并产生一个新内存，使这个新增的指针指向新的内存
2. 采用深拷贝，释放内存时就不会出现在浅拷贝时重复释放同一个内存的错误。
3. 深拷贝对function、undefined、Symbol()这3种对象会丢失

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

浅拷贝

1. 在指针的情况下，浅拷贝只是增加一个指针，指向已经存在的内存，并没有产生新的内存
2. 只拷贝了第一层的对象，深层对象没有拷贝（实例中的newForm3 第一层username 改变而源数据form没变，而第二次的order的属性msg源form已经被改变了）

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

实例

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

总结

如果需要拷贝一个含多层对象的数据，用深拷贝；如果是单层对象，建议用浅拷贝