js - object.assign 以及淺、深拷貝

淺（引用）拷貝：共用同一內存地址,你改值我也變

譬如常用的對象賦值操作

 

深拷貝：深拷貝即創建新的內存地址保存值(互不影響)

譬如以下

const shallBasicCopy = obj => {
  JSON.parse(JSON.stringify(obj))
}

 

* 優點:能正確處理的對象只有Number、String、Array等能夠被json表示的數據結構

* 缺點:函數這種不能被json表示的類型將不能被正確處理

 

關於object.assign的梗（對象深、淺拷貝）

有些人說深拷貝，有些人說淺拷貝，也不見的誰錯或對（某些特定情況下）

    // 深拷貝
    let srcObj = {
      'name': 'lilei',
      'age': '20'
    };

    let copyObj2 = Object.assign({}, srcObj, {
      'age': '21'
    });

    copyObj2.age = '23';

    console.log('srcObj', srcObj); //{ name: 'lilei', age: '22' }



    // 淺拷貝
    srcObj = {
      'name': '明',
      grade: {
        'chi': '50',
        'eng': '50'
      }
    };
    copyObj2 = Object.assign({}, srcObj);
    copyObj2.name = '紅';
    copyObj2.grade.chi = '60';
    console.log('新 objec srcObj', srcObj); // { name: '明', grade: { chi: '60', eng: '50' } }

 

梗就在這里：

從例子中可以看出，改變復制對象的name 和 grade.chi ，源對象的name沒有變化，但是grade.chi卻被改變了。因此我們可以看出Object.assign()拷貝的只是屬性值，假如源對象的屬性值是一個指向對象的引用，它也只拷貝那個引用值。 
也就是說，對於Object.assign()而言, 如果對象的屬性值為簡單類型（string， number），通過Object.assign({},srcObj);得到的新對象為‘深拷貝’；如果屬性值為對象或其它引用類型，那對於這個對象而言其實是淺拷貝的。這是Object.assign()特別值得注意的地方。 
多說一句，Object.assign({}, src1, src2); 對於scr1和src2之間相同的屬性是直接覆蓋的，如果屬性值為對象，是不會對對象之間的屬性進行合並的

 

對象深拷貝可以利用第三方：underscore 實現

 

 

數組的淺、深拷貝也是如此！

 

 

 

 

 

 

詳情可以看MDN，文章轉載於：https://segmentfault.com/a/1190000014107100