【進階4-1期】詳細解析賦值、淺拷貝和深拷貝的區別（轉）

這是我在公衆號（高級前端進階）看到的文章，如今作筆記  https://github.com/yygmind/blog/issues/25

1、賦值（Copy）

賦值是將某一數值或對象賦給某個變量的過程，分爲下面 2 部分

• 基本數據類型：賦值，賦值以後兩個變量互不影響

• 引用數據類型：賦址，兩個變量具備相同的引用，指向同一個對象，相互之間有影響

對基本類型進行賦值操做，兩個變量互不影響。

  let a = 1
  let b = a
  console.log(b)
  a = 3
  console.log(a)
  console.log(b)

對引用類型進行賦址操做，兩個變量指向同一個對象，改變變量 a 以後會影響變量 b，哪怕改變的只是對象 a 中的基本類型數據。

let a = {
    name: "muyiy",
    book: {
        title: "You Don't Know JS",
        price: "45"
    }
}
let b = a;
console.log(b);
// {
//     name: "muyiy",
//     book: {title: "You Don't Know JS", price: "45"}
// } 

a.name = "change";
a.book.price = "55";
console.log(a);
// {
//     name: "change",
//     book: {title: "You Don't Know JS", price: "55"}
// } 

console.log(b);
// {
//     name: "change",
//     book: {title: "You Don't Know JS", price: "55"}
// } 

一般在開發中並不但願改變變量 a 以後會影響到變量 b，這時就須要用到淺拷貝和深拷貝。

2、淺拷貝（Shallow Copy）

一、什麼是淺拷貝

建立一個新對象，這個對象有着原始對象屬性值的一份精確拷貝。若是屬性是基本類型，拷貝的就是基本類型的值，若是屬性是引用類型，拷貝的就是內存地址 ，因此若是其中一個對象改變了這個地址，就會影響到另外一個對象。

上圖中，SourceObject 是原對象，其中包含基本類型屬性 field1 和引用類型屬性 refObj。淺拷貝以後基本類型數據  field2 和 filed1 是不一樣屬性，互不影響。但引用類型 refObj 仍然是同一個，改變以後會對另外一個對象產生影響。

簡單來講能夠理解爲淺拷貝只解決了第一層的問題，拷貝第一層的基本類型值，以及第一層的引用類型地址。

二、淺拷貝使用場景

• Object.assign()

Object.assign() 方法用於將全部可枚舉屬性的值從一個或多個源對象複製到目標對象。它將返回目標對象。

let a = {
    name: "muyiy",
    book: {
        title: "You Don't Know JS",
        price: "45"
    }
}
let b = Object.assign({}, a);
console.log(b);
// {
//     name: "muyiy",
//     book: {title: "You Don't Know JS", price: "45"}
// } 

a.name = "change";
a.book.price = "55";
console.log(a);
// {
//     name: "change",
//     book: {title: "You Don't Know JS", price: "55"}
// } 

console.log(b);
// {
//     name: "muyiy",
//     book: {title: "You Don't Know JS", price: "55"}
// } 

上面代碼改變對象 a 以後，對象 b 的基本屬性保持不變。可是當改變對象 a 中的對象 book 時，對象 b 相應的位置也發生了變化。

• 展開語法 Spread

let a = {
    name: "muyiy",
    book: {
        title: "You Don't Know JS",
        price: "45"
    }
}
let b = {...a};
console.log(b);
// {
//     name: "muyiy",
//     book: {title: "You Don't Know JS", price: "45"}
// } 

a.name = "change";
a.book.price = "55";
console.log(a);
// {
//     name: "change",
//     book: {title: "You Don't Know JS", price: "55"}
// } 

console.log(b);
// {
//     name: "muyiy",
//     book: {title: "You Don't Know JS", price: "55"}
// } 

經過代碼能夠看出實際效果和 Object.assign() 是同樣的。

展開語法 Spread本質就是淺拷貝

Array.prototype.slice()

slice() 方法返回一個新的數組對象，這一對象是一個由 begin和 end（不包括end）決定的原數組的淺拷貝。原始數組不會被改變。

let a = [0, "1", [2, 3]];
let b = a.slice(1);
console.log(b);
// ["1", [2, 3]]

a[1] = "99";
a[2][0] = 4;
console.log(a);
// [0, "99", [4, 3]]

console.log(b);
//  ["1", [4, 3]]

能夠看出，改變 a[1] 以後 b[0] 的值並無發生變化，但改變 a[2][0] 以後，相應的 b[1][0] 的值也發生變化。說明 slice() 方法是淺拷貝，相應的還有concat等，在工做中面對複雜數組結構要額外注意。

3、深拷貝（Deep Copy）

一、什麼是深拷貝

深拷貝會拷貝全部的屬性，並拷貝屬性指向的動態分配的內存。當對象和它所引用的對象一塊兒拷貝時即發生深拷貝。深拷貝相比於淺拷貝速度較慢而且花銷較大。拷貝先後兩個對象互不影響。

二、深拷貝使用場景

JSON.parse(JSON.stringify(object))

let a = {
    name: "muyiy",
    book: {
        title: "You Don't Know JS",
        price: "45"
    }
}
let b = JSON.parse(JSON.stringify(a));
console.log(b);
// {
//     name: "muyiy",
//     book: {title: "You Don't Know JS", price: "45"}
// } 

a.name = "change";
a.book.price = "55";
console.log(a);
// {
//     name: "change",
//     book: {title: "You Don't Know JS", price: "55"}
// } 

console.log(b);
// {
//     name: "muyiy",
//     book: {title: "You Don't Know JS", price: "45"}
// } 

徹底改變變量 a 以後對 b 沒有任何影響，這就是深拷貝的魔力。

咱們看下對數組深拷貝效果如何。

let a = [0, "1", [2, 3]];
let b = JSON.parse(JSON.stringify( a.slice(1) ));
console.log(b);
// ["1", [2, 3]]

a[1] = "99";
a[2][0] = 4;
console.log(a);
// [0, "99", [4, 3]]

console.log(b);
//  ["1", [2, 3]]

對數組深拷貝以後，改變原數組不會影響到拷貝以後的數組。

可是該方法有如下幾個問題。

一、會忽略 undefined

二、會忽略 symbol

三、不能序列化函數

四、不能解決循環引用的對象

let obj = {
    name: 'muyiy',
    a: undefined,
    b: Symbol('muyiy'),
    c: function() {}
}
console.log(obj);
// {
//     name: "muyiy", 
//     a: undefined, 
//  b: Symbol(muyiy), 
//  c: ƒ ()
// }

let b = JSON.parse(JSON.stringify(obj));
console.log(b);
// {name: "muyiy"}

上面代碼說明了不能正常處理 undefined、symbol 和函數這三種狀況。

let obj = {
    a: 1,
    b: {
        c: 2,
           d: 3
    }
}
obj.a = obj.b;
obj.b.c = obj.a;

let b = JSON.parse(JSON.stringify(obj));
// Uncaught TypeError: Converting circular structure to JSON

除了上面介紹的深拷貝方法，經常使用的還有`jQuery.extend() 和 lodash.cloneDeep()

4、總結

 

如今解釋爲何深拷貝不能正常處理 undefined、symbol 和函數這三種狀況？

參考地址：https://www.imooc.com/article/70653

JSON.parse(JSON.stringify(obj))咱們通常用來深拷貝，其過程說白了 就是利用JSON.stringify 將js對象序列化（JSON字符串），再使用JSON.parse來反序列化(還原)js對象；序列化的做用是存儲(對象自己存儲的只是一個地址映射，若是斷電，對象將不復存在，所以需將對象的內容轉換成字符串的形式再保存在磁盤上 )和傳輸（例如 若是請求的Content-Type是 application/x-www-form-urlencoded，則前端這邊須要使用qs.stringify(data)來序列化參數再傳給後端，不然後端接受不到；   ps:  Content-Type 爲 application/json;charset=UTF-8或者 multipart/form-data 則能夠不須要  ）；咱們在使用 JSON.parse(JSON.stringify(xxx))時應該注意一下幾點：
一、若是obj裏面有時間對象，則JSON.stringify後再JSON.parse的結果，時間將只是字符串的形式。而不是時間對象；

var test = {
    name: 'a',
    date: [new Date(1536627600000), new Date(1540047600000)],
};
  let b;
  b = JSON.parse(JSON.stringify(test))
  console.log(b)

二、若是obj裏有RegExp、Error對象，則序列化的結果將只獲得空對象；

const test = {
    name: 'a',
    date: new RegExp('\\w+'),
  };      // debugger
  const copyed = JSON.parse(JSON.stringify(test));
  test.name = 'test'
  console.error('ddd', test, copyed)

三、若是obj裏有函數，undefined，則序列化的結果會把函數或 undefined丟失；

 

const test = {
    name: 'a',
    age: undefined,
    date: function hehe() {
      console.log('fff')
    },
  };      // debugger
  const copyed = JSON.parse(JSON.stringify(test));
  test.name = 'test'
  console.error('ddd', test, copyed)

四、若是obj裏有NaN、Infinity和-Infinity，則序列化的結果會變成null

 const test = {
    name: 'a',
    age: undefined,
    date: NaN
  };      // debugger
  const copyed = JSON.parse(JSON.stringify(test));
  test.name = 'test'
  console.error('ddd', test, copyed)

五、JSON.stringify()只能序列化對象的可枚舉的自有屬性，例如 若是obj中的對象是有構造函數生成的，  
則使用JSON.parse(JSON.stringify(obj))深拷貝後，會丟棄對象的constructor；

  function Person(name) {
    this.name = name;
    console.log(name)
  }
  const liai = new Person('liai');
  const test = {
    name: 'a',
    date: liai,
  };      // debugger
  const copyed = JSON.parse(JSON.stringify(test));
  test.name = 'test'
  console.error('ddd', test, copyed)

 

六、若是對象中存在循環引用的狀況也沒法正確實現深拷貝；

若是拷貝的對象不涉及上面講的狀況，可使用JSON.parse(JSON.stringify(obj))實現深拷貝，