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

木易楊發表於2019-02-16
賦值

一、賦值（Copy）

賦值是將某一數值或物件賦給某個變數的過程，分為下面 2 部分

  • 基本資料型別：賦值，賦值之後兩個變數互不影響
  • 引用資料型別：賦址，兩個變數具有相同的引用，指向同一個物件，相互之間有影響

對基本型別進行賦值操作，兩個變數互不影響。

// 木易楊
let a = "muyiy";
let b = a;
console.log(b);
// muyiy

a = "change";
console.log(a);
// change
console.log(b);
// muyiy
複製程式碼

對引用型別進行賦址操作，兩個變數指向同一個物件，改變變數 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，這時就需要用到淺拷貝和深拷貝。

二、淺拷貝（Shallow Copy）

1、什麼是淺拷貝

建立一個新物件，這個物件有著原始物件屬性值的一份精確拷貝。如果屬性是基本型別，拷貝的就是基本型別的值，如果屬性是引用型別，拷貝的就是記憶體地址 ，所以如果其中一個物件改變了這個地址，就會影響到另一個物件。

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

上圖中，SourceObject 是原物件，其中包含基本型別屬性 field1 和引用型別屬性 refObj。淺拷貝之後基本型別資料 field2 和 filed1 是不同屬性，互不影響。但引用型別 refObj 仍然是同一個，改變之後會對另一個物件產生影響。

簡單來說可以理解為淺拷貝只解決了第一層的問題，拷貝第一層的基本型別值，以及第一層的引用型別地址。

2、淺拷貝使用場景

  • Object.assign()

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() 是一樣的。

  • 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等，在工作中面對複雜陣列結構要額外注意。

三、深拷貝（Deep Copy）

1、什麼是深拷貝

深拷貝會拷貝所有的屬性，並拷貝屬性指向的動態分配的記憶體。當物件和它所引用的物件一起拷貝時即發生深拷貝。深拷貝相比於淺拷貝速度較慢並且花銷較大。拷貝前後兩個物件互不影響。

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

2、深拷貝使用場景

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]]
複製程式碼

對陣列深拷貝之後，改變原陣列不會影響到拷貝之後的陣列。

但是該方法有以下幾個問題。

1、會忽略 undefined

2、會忽略 symbol

3、不能序列化函式

4、不能解決迴圈引用的物件

5、不能正確處理new Date()

6、不能處理正則

  • 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"}
複製程式碼
  • 迴圈引用情況下，會報錯。
// 木易楊
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
複製程式碼
  • new Date 情況下，轉換結果不正確。
// 木易楊
new Date();
// Mon Dec 24 2018 10:59:14 GMT+0800 (China Standard Time)

JSON.stringify(new Date());
// ""2018-12-24T02:59:25.776Z""

JSON.parse(JSON.stringify(new Date()));
// "2018-12-24T02:59:41.523Z"
複製程式碼

解決方法轉成字串或者時間戳就好了。

// 木易楊
let date = (new Date()).valueOf();
// 1545620645915

JSON.stringify(date);
// "1545620673267"

JSON.parse(JSON.stringify(date));
// 1545620658688
複製程式碼
  • 正則情況下，
// 木易楊
let obj = {
    name: "muyiy",
    a: /'123'/
}
console.log(obj);
// {name: "muyiy", a: /'123'/}

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

複製程式碼

PS：為什麼會存在這些問題可以學習一下 JSON。

除了上面介紹的深拷貝方法，常用的還有jQuery.extend() 和 lodash.cloneDeep()，後面文章會詳細介紹原始碼實現，敬請期待！

四、總結

-- 和原資料是否指向同一物件 第一層資料為基本資料型別 原資料中包含子物件
賦值 是 改變會使原資料一同改變 改變會使原資料一同改變
淺拷貝 否 改變不會使原資料一同改變 改變會使原資料一同改變
深拷貝 否 改變不會使原資料一同改變 改變不會使原資料一同改變

參考

js 深拷貝 vs 淺拷貝

Java 深拷貝和淺拷貝

MDN 之 Object.assign()

MDN 之展開語法

MDN 之 Array.prototype.slice()

進階系列目錄

  • 【進階1期】 呼叫堆疊
  • 【進階2期】 作用域閉包
  • 【進階3期】 this全面解析
  • 【進階4期】 深淺拷貝原理
  • 【進階5期】 原型Prototype
  • 【進階6期】 高階函式
  • 【進階7期】 事件機制
  • 【進階8期】 Event Loop原理
  • 【進階9期】 Promise原理
  • 【進階10期】Async/Await原理
  • 【進階11期】防抖/節流原理
  • 【進階12期】模組化詳解
  • 【進階13期】ES6重難點
  • 【進階14期】計算機網路概述
  • 【進階15期】瀏覽器渲染原理
  • 【進階16期】webpack配置
  • 【進階17期】webpack原理
  • 【進階18期】前端監控
  • 【進階19期】跨域和安全
  • 【進階20期】效能優化
  • 【進階21期】VirtualDom原理
  • 【進階22期】Diff演算法
  • 【進階23期】MVVM雙向繫結
  • 【進階24期】Vuex原理
  • 【進階25期】Redux原理
  • 【進階26期】路由原理
  • 【進階27期】VueRouter原始碼解析
  • 【進階28期】ReactRouter原始碼解析

交流

進階系列文章彙總：github.com/yygmind/blo…，內有優質前端資料，覺得不錯點個star。

我是木易楊，網易高階前端工程師，跟著我每週重點攻克一個前端面試重難點。接下來讓我帶你走進高階前端的世界，在進階的路上，共勉！

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

相關文章