js Object.assign()究竟是深拷貝還是淺拷貝

之前我有對object函數相關的常見方法做過總結，感興趣的同學可以通過鏈接查看：

https://www.cnblogs.com/zhilu/p/13842177.html

一、今天對Object.assign()做一個分析總結。

1、定義：Object.assign() 方法用於將所有可枚舉屬性的值從一個或多個源對象復制到目標對象。它將返回目標對象。

2、Object.assign()拷貝

Object.assign()拷貝的是 屬性值。假如源對象的屬性值是一個對象的引用，那么它也只指向那個引用。也就是說，如果對象的屬性值為 簡單類型（如string， number），通過Object.assign({},srcObj);得到的新對象為深拷貝；如果屬性值為 對象或其它引用類型，那對於這個對象而言其實是淺拷貝的。

 

也就是說，當對象中只有 一級屬性，沒有二級屬性的時候，此方法為 深拷貝；

但是對象中有 二級屬性的時候，此方法，在二級屬性以后就是 淺拷貝。

 

  

3、所以，當對象中有二級屬性的時候， 使用遞歸的方式實現深拷貝

二、延伸：怎樣實現深拷貝呢

1、對象深拷貝的幾種方法

 

1）用 JSON.stringify 把對象轉換成字符串，再用 JSON.parse 把字符串轉換成新的對象，但是需要注意的是，可以轉成 JSON 格式的對象才能使用這種方法， 如果對象中包含 function 或 RegExp 這些就不能用這種方法了。

function deepClone2(obj) {
  let _obj = JSON.stringify(obj),
  return JSON.parse(_obj);
}

缺點：

（1）如果對象里有函數,函數無法被拷貝下來

（2）無法拷貝copyObj對象原型鏈上的屬性和方法

（3）當數據的層次很深，會棧溢出

2）使用普通遞歸的方式實現深拷貝

function deepClone(obj){
　　let objClone =  Array.isArray(obj) ? [] : {};
　　if (obj && typeof obj === 'object') {
　　　　for(let key in obj){
　　　　　　if (obj[key] && typeof obj[key] === 'object'){
　　　　　　　　objClone[key] = deepClone(obj[key]);
　　　　　　}else{
　　　　　　　　objClone[key] = obj[key]
　　　　　　}
　　　　}
　　}
　　return objClone;
}

缺點：

（1）無法保持引用

（2）當數據的層次很深，會棧溢出

3）防棧溢出函數

function cloneLoop(x) {
    const root = {};

    // 棧
    const loopList = [
        {
            parent: root,
            key: undefined,
            data: x,
        }
    ];

    while(loopList.length) {
        // 深度優先
        const node = loopList.pop();
        const parent = node.parent;
        const key = node.key;
        const data = node.data;

        // 初始化賦值目標，key為undefined則拷貝到父元素，否則拷貝到子元素
        let res = parent;
        if (typeof key !== 'undefined') {
            res = parent[key] = {};
        }

        for(let k in data) {
            if (data.hasOwnProperty(k)) {
                if (typeof data[k] === 'object') {
                    // 下一次循環
                    loopList.push({
                        parent: res,
                        key: k,
                        data: data[k],
                    });
                } else {
                    res[k] = data[k];
                }
            }
        }
    }

    return root;
}

優點：

（1）不會棧溢出

（2）支持很多層級的數據

 function copyObject(orig) {
    var copy = Object.create(Object.getPrototypeOf(orig));
    copyOwnPropertiesFrom(copy, orig);
    return copy;
  }


  function copyOwnPropertiesFrom(target, source) {
    Object
    .getOwnPropertyNames(source)
    .forEach(function (propKey) {
      var desc = Object.getOwnPropertyDescriptor(source, propKey);
      Object.defineProperty(target, propKey, desc);
    });
    return target;
  }

  var obj = {
    name: 'Jack',
    age: '32',
    job: 'developer'
  };

  var obj2 = copyObject(obj);
  console.log(obj2);
  obj.age = 39;
  obj.name = 'Tom';
  console.log(obj);
  console.log(obj2);

4）通過jQuery的extend方法實現深拷貝

var obj = {
    a: '123',
    b: 234,
    c: true,
    d: null,
    e: function() {console.log('test')},
    h: new Set([4,3,null]),
    i:Symbol('fsd'),
    k: new Map([ ["name", "test"],  ["title", "Author"]  ])
}
console.log($.extend(true, {}, obj))

5）lodash函數庫實現深拷貝

let clone = cloneDeep(obj)

2、數組深拷貝的幾種方法

1）concat(arr1, arr2,....)

2）slice(idx1, idx2)

1）沒有參數是拷貝數組

2）只有一個參數是從該位置起到結束拷貝數組元素

3）兩個參數，拷貝從起始位置到結束位置的元素（不包含結束位置的元素：含頭不含尾）

需要注意的是，slice()和concat()這兩個方法，僅適用於對不包含引用對象的一維數組的深拷貝

 

三、賦值、淺拷貝與深拷貝的區別