对象的浅拷贝与深拷贝——object.assign()与object.parse(object.stringfy())的使用

待我称王封你为后i 2021-07-26 01:16 303阅读 0赞

对象的拷贝在工作中是经常用到的，比如在做表单时，查看详情信息，需要将表单中的数据传递到详情页面，此时就需要的是拷贝。

## Object.assign()——浅拷贝与深拷贝 ##

#### 针对一级属性的对象——Object.assign()是深拷贝 ####

针对只有一级属性的对象而言，`Object.assign()`能够实现**深拷贝**的功能  
什么是一级属性的对象？就是属性值均为原始值的对象：

let a = { id:123,name:'张三'}
    let b = { id:124,name:'李四',parent:'王五'}
    //如果要实现将b对象拷贝到一个新的对象中，则可以通过下面的方式来处理
    let d = Object.assign({ },b);
    //此时d的结果是：{id:124,name:'李四',parent:'王五'}
    //如果要合并对象a和对象b，则可以通过下面的方式来处理
    let c = Object.assign(a,b);
    //此时c的结果是：{id:124,name:'李四',parent:'王五'}
    //注意，后面的对象会把前面对象的相同属性名的属性值覆盖。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]

#### 针对多级属性的对象——Object.assign()是浅拷贝 ####

什么是多级属性的对象？就是属性值可以为引用值的对象：

let a2 = { id:123,name:'张三',family:{ parent:'王五',age:50}}
    let b2 = { id:124,name:'李四',family:{ parent:'丽丽',brother:'哥哥'}}
    //如果要实现将b对象拷贝到一个新的对象中，则可以通过下面的方式来处理
    let d2 = Object.assign({ },b2);
    //此时d2的结果是：{id:124,name:'李四',family:{parent:'丽丽',brother:'哥哥'}}
    //如果要合并对象a2和对象b2，则可以通过下面的方式来处理
    let c2 = Object.assign(a2,b2);
    //此时c2的结果是：{id:124,name:'李四',family:{parent:'丽丽',brother:'哥哥'}}
    //注意，后面的对象会把前面对象的相同属性名的属性值覆盖。
    //而我们想要的是对象的合并，而不仅仅是覆盖属性值

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
而且，通过`Object.assign()`合并的对象，引用值指向的是同一个地址，修改合并前的对象的值，合并后的对象值也会发生改变。

//修改b2对象中的引用值的内容，d2 c2中的值也会发生改变
    b2.family.parent = "测试";
    //此时d2中的值改为了：{id:124,name:'李四',family:{parent:'测试',brother:'哥哥'}}

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]

## 通过递归的方式实现Oject.assign的深拷贝(改变引用值的问题) ##

function _deepClone(source) { 
      let target;
      if (typeof source === 'object') { 
        target = Array.isArray(source) ? [] : { }
        for (let key in source) { 
          if (source.hasOwnProperty(key)) { 
            if (typeof source[key] !== 'object') { 
              target[key] = source[key]
            } else { 
              target[key] = _deepClone(source[key])
            }
          }
        }
      } else { 
        target = source
      }
      return target
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]

## 通过Object.parse(Object.stringfy())实现深拷贝 ##

function deepClone(data) { 
        let _data = JSON.stringify(data),
            dataClone = JSON.parse(_data);
        return dataClone;
    };

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/f7eafffc107b42cd9e766b5f1d6196a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/2cd0017a671e467f893214ed5880149e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20210725/f2ef68084eda4d6792b6534a75dafd40.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20210725/95e7c25835b54486b9ba12e69e9a6ca8.png