vue開發過程中，由於常常與資料打交道，弄懂每個data的狀態是很有必要的。如果資料耦合度較高，弄懂淺拷貝和深拷貝就顯得尤為重要。因此在此總結一下。

1.對於基本資料型別，由於變數名和值都存在棧記憶體中，因此，簡單的=會開闢一個新空間，賦值和被複制的變數都是相互獨立的：

let a = "aaa";
let b;
b = a;
b = "bbb";
// 這裡輸出bbb
console.log(b);

結果如下：

2.接下來我們討論較為複雜的object型別的資料。由於引用資料型別名字存在棧記憶體中，值存在堆記憶體中，棧記憶體會提供一個引用的地址指向堆記憶體中的值。當我們用=進行賦值時，其實只是複製了引用地址，如果這時改變值，會影響到賦值與被複制的雙方:

淺拷貝可以用=賦值或者Object.assign方法，這裡重點說下深拷貝方法

深拷貝實現方法：

（1）for···in 迴圈到第一層：

var obj1 = {
  a: "aaa",
  b: "bbb",
  c: {
    d: "ddd",
  },
};
obj2 = {};
for (let i in obj1) {
  obj2[i] = obj1[i];
}
obj2.a = "aaa2";
obj2.c.d = "ddd2";
console.log(obj1);
console.log(obj2);

結果如下：

發現只有a改變了，c並沒有改變，不算是真正的深拷貝，但我們這裡有個思路：遞迴實現不就行了

function deepClone(obj){
    // 考慮到objClone變數的多樣性
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判斷obj子元素是否為物件，如果是，遞迴複製
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] 
 
= deepClone(obj[key]);
                }else{
                    //如果不是，簡單複製
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}    
let a={
    a: "aaa",
    b: "bbb",
    c: {
      d: "ddd",
    },
  };
b=deepClone(a);
a.a="aaa2";
a.c.d="ddd2"
console.log(a);
console.log(b);

結果如下：

發現不論多少層都能實現a和b互不干擾。

（2）此外，我們還可以通過loadash庫實現深拷貝：

let result = _.cloneDeep(test)

（3）通過JSON物件來實現深拷貝，這個方法比較取巧，且不依賴其他庫，在我程式設計中用的最多：

function deepClone(obj) {
  var temp_obj = JSON.stringify(obj),
    objClone = JSON.parse(temp_obj);
  return objClone;
}

對於陣列，我們可以用slice和concat實現陣列的深拷貝：

// 當數組裡面的值是基本資料型別，比如String，Number，Boolean時，屬於深拷貝
// 當數組裡面的值是引用資料型別，比如Object，Array時，屬於淺拷貝
var arr1 = ["1","2","3"]; 
var arr2 = arr1.slice(0);
arr2[1] = "9";
console.log("陣列的原始值：" + arr1 );
console.log("陣列的新值：" + arr2 );

// 當數組裡面的值是基本資料型別，比如String，Number，Boolean時，屬於深拷貝
var arr1 = ["1","2","3"];
var arr2 = arr1.concat();
arr2[1] = "9";
console.log("陣列的原始值：" + arr1 );
console.log("陣列的新值：" + arr2 );
// 當數組裡面的值是引用資料型別，比如Object，Array時，屬於淺拷貝
var arr1 = [{a:1},{b:2},{c:3}];
var arr2 = arr1.concat();
arr2[0].a = "9";
console.log("陣列的原始值：" + arr1[0].a ); // 陣列的原始值：9
console.log("陣列的新值：" + arr2[0].a ); // 陣列的新值：9

以上就是常用的拷貝技巧，希望對大家有所幫助。