一、資料型別

1.資料型別分類

要理解 JavaScript中淺拷貝和深拷貝的區別，首先要明白JavaScript的資料型別

JavaScript有兩種資料型別，基礎資料型別和引用資料型別

• 基礎型別：undefined 、 null、number、string、boolean、symbol
• 引用型別：object物件型別(Object 、Array 、Function 、Data)

2.資料型別關鍵知識

• 基礎型別是按照值進行訪問的，可以操作儲存在變數中的實際的值。
• 對於引用型別，javascript是不允許直接訪問值的，不能直接操作物件的記憶體空間，在操作物件時候，實際操作是引用，而不是實際的引用。
• 基礎型別存在於棧中
• 引用型別的值是同時儲存在棧記憶體和堆記憶體中的物件。

3.不同資料型別的存放與複製

3.1存放

• a1 = 0; a2 = ‘this is str’; a3 = null
  存放在棧記憶體中
• var c =[1,2,3] ;var d = {m:20}
  變數名與記憶體地址儲存在棧記憶體中
• [1,2,3]與{m:20}
  作為物件儲存在堆記憶體中

3.2基礎資料型別的複製

3.3引用資料型別的複製

m與n指向同一個記憶體空間，當m或者n改變時，另一個也跟著改變

二、淺拷貝

• 只複製指向某個物件的指標，而不復制物件本身，新舊物件共享一塊記憶體；
• 淺複製只複製一層物件的屬性，只會將物件的各個屬性進行依次複製，並不會進行遞迴複製

1.簡單的引用複製

function shallowClone(Obj) {
  var objClone = {};
  for ( var i in Obj) {
    obj[i] = objClone[i];
  }
  return obj;
}

2.Object.assign()

Object.assign() 方法可以把任意多個的源物件自身的可列舉屬性拷貝給目標物件，然後返回目標物件

var x = {
  a: 1,
  b: { f: { g: 1 } },
  c: [ 1, 2, 3 ]
};
var y = Object.assign({}, x);

三、深拷貝

複製並建立一個一摸一樣的物件，不共享記憶體，修改新物件，舊物件保持不變；

1.採用遞迴的方法複製拷貝物件

function deepclone1(obj) {
        let objClone = Array.isArray(obj) ? [] : {};
        if (obj && typeof obj === "object") {
            for (key in obj) {
                //if (obj.hasOwnProperty(key)) {   //也可以不加
                    if (obj[key] && typeof obj[key] === "object") {
                        objClone[key] = deepclone(obj[key])
                    } else {
                        objClone[key] = obj[key]
                    }
                //}
            }
        }
        return objClone
    }
    var a = [1, 2, 3, 4];
    var b = deepclone(a);
    a[0] = 8
    console.log(a, b);

2.JSON.stringify結合JSON.parse

 function deepclone2(obj){
      var _obj = JSON.stringify(obj);
      var cloneObj = JSON.parse(_obj);
      return cloneObj
    }
    var a =[1,2,3,4];
    var b= deepclone(a);
    a[0]=8
    console.log(a,b);
   

可以用JSON.stringify與JSON.parse實現深拷貝的原因是JSON.stringify(obj)轉換成字串，變成基本資料型別，基本型別拷貝是直接在棧記憶體新開空間，直接複製一份名-值，不影響之前的物件

**缺點：這種方法可以實現陣列和物件和基本資料型別的深拷貝，但不能處理函式。**因為JSON.stringify()方法是將一個javascript值轉換我一個JSON字串，不能接受函式。其他影響如下：

• 物件中有時間物件，那麼用該方法拷貝之後的物件中，時間是字串形式而不是時間物件
• 如果物件中有RegExp、Error物件，那麼序列化的結果是空
• 如果物件中有函式或者undefined，那麼序列化的結果會把函式或undefined丟失
• 如果物件中有NAN、infinity、-infinity，那麼序列化的結果會變成null
• JSON.stringfy（）只能序列化物件的可列舉自有屬性，如果物件中有是建構函式生成的，那麼拷貝後會丟棄物件的constructor
• 如果物件中存在迴圈引用也無法正確實現深拷貝

3.Array的slice和concat方法

Array的slice和concat方法不修改原陣列，只會返回一個淺複製了原陣列中的元素的一個新陣列。
之所以把它放在深拷貝里，是因為它看起來像是深拷貝。而實際上它是淺拷貝。
原陣列的元素會按照下述規則拷貝：

• 如果該元素是個物件引用 （不是實際的物件），slice 會拷貝這個物件引用到新的陣列裡。兩個物件引用都引用了同一個物件。如果被引用的物件發生改變，則新的和原來的陣列中的這個元素也會發生改變。
• 對於字串、數字及布林值來說（不是 String、Number 或者 Boolean 物件），slice 會拷貝這些值到新的陣列裡。在別的陣列裡修改這些字串或數字或是布林值，將不會影響另一個陣列。

如果向兩個陣列任一中新增了新元素，則另一個不會受到影響。例子如下：

var array = [1,2,3]; 
var array_shallow = array; 
var array_concat = array.concat(); 
var array_slice = array.slice(0); 
console.log(array === array_shallow); //true 
console.log(array === array_slice); //false，“看起來”像深拷貝
console.log(array === array_concat); //false，“看起來”像深拷貝

可以看出，concat和slice返回的不同的陣列例項，這與直接的引用複製是不同的。而從另一個例子可以看出Array的concat和slice並不是真正的深複製，陣列中的物件元素(Object,Array等)只是複製了引用。如下：：

var array = [1, [1,2,3], {name:"array"}]; 
var array_concat = array.concat();
var array_slice = array.slice(0);
array_concat[1][0] = 5;  //改變array_concat中陣列元素的值 
console.log(array[1]); //[5,2,3] 
console.log(array_slice[1]); //[5,2,3] 
array_slice[2].name = "array_slice"; //改變array_slice中物件元素的值 
console.log(array[2].name); //array_slice
console.log(array_concat[2].name); //array_slice

4.jQuery.extend()方法原始碼實現

var array = [1,2,3,4];
var newArray = $.extend(true,[],array); // true為深拷貝，false為淺拷貝

5.Reflect法

// 代理法
function deepClone(obj) {
    if (!isObject(obj)) {
        throw new Error('obj 不是一個物件！')
    }

    let isArray = Array.isArray(obj)
    let cloneObj = isArray ? [...obj] : { ...obj }
    Reflect.ownKeys(cloneObj).forEach(key => {
        cloneObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]
    })

    return cloneObj
}

---

參考資料

JavaScript中淺拷貝和深拷貝的區別和實現
javascript中的深拷貝和淺拷貝區分以及實現