JavaScript深淺拷貝

基本類型 & 引用類型

ECMAScript中的數據類型可分爲兩種：

• 基本類型：undefined,null,Boolean,String,Number,Symbol
• 引用類型：Object,Array,Date,Function,RegExp等

不一樣類型的存儲方式：

• 基本類型：基本類型值在內存中佔據固定大小，保存在棧內存中
• 引用類型：引用類型的值是對象，保存在堆內存中，而棧內存存儲的是對象的變量標識符以及對象在堆內存中的存儲地址

不一樣類型的複製方式：

• 基本類型：從一個變量向另一個新變量複製基本類型的值，會建立這個值的一個副本，並將該副本複製給新變量

let foo = 1;
let bar = foo;
console.log(foo === bar); // -> true

// 修改foo變量的值並不會影響bar變量的值
let foo = 233;
console.log(foo); // -> 233
console.log(bar); // -> 1
複製代碼

• 引用類型：從一個變量向另外一個新變量複製引用類型的值，其實複製的是指針，最終兩個變量最終都指向同一個對象

let foo = {
  name: 'leeper',
  age: 20
}
let bar = foo;
console.log(foo === bar); // -> true

// 改變foo變量的值會影響bar變量的值
foo.age = 19;
console.log(foo); // -> {name: 'leeper', age: 19}
console.log(bar); // -> {name: 'leeper', age: 19}
複製代碼

深拷貝 & 淺拷貝

• 淺拷貝：僅僅是複製了引用，彼此之間的操做會互相影響
• 深拷貝：在堆中從新分配內存，不一樣的地址，相同的值，互不影響

總的來講，深淺拷貝的主要區別就是：複製的是引用仍是複製的是實例

深淺拷貝的實現

看一看原生JavaScript中提供的一些複製方法到底是深拷貝仍是淺拷貝以及動手實現深拷貝。

淺拷貝

• Array.prototype.slice()

let a = [1, 2, 3, 4];
let b = a.slice();
console.log(a === b); // -> false

a[0] = 5;
console.log(a); // -> [5, 2, 3, 4]
console.log(b); // -> [1, 2, 3, 4]
複製代碼

• Array.prototype.concat()

let a = [1, 2, 3, 4];
let b = a.concat();
console.log(a === b); // -> false

a[0] = 5;
console.log(a); // -> [5, 2, 3, 4]
console.log(b); // -> [1, 2, 3, 4]
複製代碼

看起來Array的slice(),concat()彷佛是深拷貝，再接着看就知道它們到底是深拷貝仍是淺拷貝：

let a = [[1, 2], 3, 4];
let b = a.slice();
console.log(a === b); // -> false

a[0][0] = 0;
console.log(a); // -> [[0, 2], 3, 4]
console.log(b); // -> [[0, 2], 3, 4]
複製代碼

一樣，對於concat()也進行驗證:

let a = [[1, 2], 3, 4];
let b = a.concat();
console.log(a === b); // -> false

a[0][0] = 0;
console.log(a); // -> [[0, 2], 3, 4]
console.log(b); // -> [[0, 2], 3, 4]
複製代碼

綜上， Array的slice和concat方法並不是真正的深拷貝，對於Array的第一層的元素是深拷貝，而Array的第二層 slice和concat方法是複製引用。因此，Array的slice和concat方法都是淺拷貝。

深拷貝

• JSON.parse()和JSON.stringify()

1. JSON.stringify()：把一個js對象序列化爲一個JSON字符串
2. JSON.parse()：把JSON字符串反序列化爲一個js對象

let obj = {
  name: 'leeper',
  age: 20,
  friend: {
    name: 'lee',
    age: 19
  }
};
let copyObj = JSON.parse(JSON.stringify(obj));
obj.name = 'Sandman';
obj.friend.name = 'Jerry';
console.log(obj);
// -> {name: "Sandman", age: 20, friend: {age: 19,name: 'Jerry'}}
console.log(copyObj);
// -> {name: "leeper", age: 20, friend: {age: 19,name: 'lee'}}
複製代碼

綜上，JSON.parse()和JSON.stringify()是徹底的深拷貝。

• 動手實現深拷貝 利用遞歸來實現對對象或數組的深拷貝。遞歸思路：對屬性中全部引用類型的值進行遍歷，直到是基本類型值爲止。

function deepCopy(obj) {
  if (!obj && typeof obj !== 'object') {
    throw new Error('error arguments');
  }
  // const targetObj = obj.constructor === Array ? [] : {};
  const targetObj = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    
    //只對對象自有屬性進行拷貝
    if (obj.hasOwnProperty(key)) {
      if (obj[key] && typeof obj[key] === 'object') {
        targetObj[key] = deepCopy(obj[key]);
      } else {
        targetObj[key] = obj[key];
      }
    }
  }
  return targetObj;
}
複製代碼