js深拷貝

該文章主要用於本身在平時學習記錄使用

淺拷貝與深拷貝

主要是針對js中引用類型的複製。在引用類型中，定義的變量至關於一個指針，指向了某個對象或數組的引用

淺拷貝

let obj = {a: 1, b: 1};
let newObj = obj;
newObj.a = 2;
console.log(obj.a);  // 2
複製代碼

newObj和obj這兩個變量都存儲了指向對象的一個引用地址，實則共用一個對象，因此當改變newObj.a = 2時，obj.a也發生改變。這就是淺拷貝。

深拷貝

深拷貝就是讓newObj.a發送變化時，obj.a不發生變化，newObj和obj至關於兩個徹底不一樣的對象。

深拷貝方法

• 使用最原始的方法，創建一個新的空對象或數組，遍歷每一個元素，將其放到新的對象或數組中，若是碰到元素也是引用類型的，則進行遞歸。
• 當進行深拷貝的元素數據爲一個數組時，能夠使用slice()或者concat()或者ES6中的擴展運算符（該方法也可用於一個對象）方法，可是該方法有個問題，當數組的元素也是一個引用類型時，則沒法進行深層次的深拷貝。

let arr = [1, 2, [3, 4], {a: 1, b: 2}];
    let newArr = arr.slice(); //newArr -> [1, 2, [3, 4], {a: 1, b: 2}]
    newArr[0] = 'change';
    console.log(arr, newArr);
複製代碼

能夠發現：newArr經過slice()方法複製了arr，當改變newArr第一層的元素時，arr不受影響

當改變深層的元素內容時，再來看一下效果：

能夠發現：newArr和arr的元素值都有變化

經測試，concat()和ES6拓展運算符與slice()狀況相同，有興趣的童鞋能夠本身試驗下，童叟無欺！！！

• 最暴力、最直接的方式：JSON.parse(JSON.stringify(obj)),可是該方法也有一些缺陷：

  1.數組

  數組元素有 undefined 或 null時：

  let arr = [undefined, 1, 2, 3, null];
  console.log(JSON.parse(JSON.stringify(arr)));  // [ null, 1, 2, 3, null ];
  複製代碼

  其中undefined被轉爲null, null依然爲null；

  2.對象

  對象中有屬性的value爲undefined 或者 null時：

  let obj = {a: 1, b: undefined, c: null, d: 'null', e: 'undefined'};
  console.log(JSON.parse(JSON.stringify(obj))); // { a: 1, c: null, d: 'null', e: 'undefined' }
  複製代碼

  其中value爲undefined的屬性被剔除，其他狀況不變。