iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 16
1
Modern Web

用範例理解 Vue.js系列 第 16

用範例理解 Vue.js #16:實例 Vue Instance (deep copy) lodash.js 效能比較

Imgur

這篇的內容可能跟 Vue 沒甚麼主要關係,只是會透過 Lodash.js 來解決深拷貝的問題。

會寫這篇是因為,最近在公司做的專案需要用到深拷貝,且需要深拷貝的物件比較大,進而研究做深拷貝效能方面的問題。

在用 lodash.js 的深拷貝前,先理解甚麼是深拷貝(Deep copy)?

Javascript 中的「原始型別」和「非原始型別」

Types 原始型別 (primitive) 非原始型別 (non-primitive)
Boolean Object
Number Array
String Function
Null Date
Undefined RegExp

補充:JavaScript 的資料型別與資料結構

原始型別 Primitive data types

如上面表格可以看到,原始型別有五個(Boolean、Number、String、Null、Undefined)。這五個是 Call by value:

這邊以 String 為例:

let myName = 'Hunter';
let myMentor = myName;

myMentor = 'Summer';

console.log(myName); // Hunter
console.log(myMentor); // Summer

當修改 myMentor 時,不會修改到 myName

非原始型別 Non-Primitive data types

嚴格來說只有 Object 才是 非原始型別 (non-primitive data),但表格中其他四項(Array、Function、Date、RegExp)也都是屬於 Object,是 Call by reference:

以 Object 為例:

let myName = {
  name: 'Hunter'
}
let myMentor = myName;

myMentor.name = 'Summer';

console.log(myName); // Summer
console.log(myMentor); // Summer

當修改 myMentor 時,myName也跟著
被修改了,因為他們根本是同一個物件。

若要避免這樣的情況,我們就要做深拷貝,避免修改到myName

淺拷貝 (Shallow Copy) VS 深拷貝 (Deep Copy)

Imgur

圖片來源:http://larry850806.github.io/2016/09/20/shallow-vs-deep-copy/

  • 淺拷貝(Shallow Copy)僅複製物件的指標,因此新舊物件是共用同一塊記憶體。

  • 深拷貝(Deep Copy)會創造一個新的物件,因此新舊物件不會互相影響,存在於不同記憶體。

Deep Copy 方法

而做到 Deep Copy 的方式有很多種:

  • 手動複製
  • Object.assign
  • JSON.parse(JSON.stringify(obj))

或是使用第三方函式庫:

  • jQuery: $.clone(), $.extend()
  • Underscore: _.clone()
  • lodash: _.clone(), _.cloneDeep()

之後會補另外一個 Lodash 效能比較的連結。

延伸閱讀傳送門:


上一篇
用範例理解 Vue.js #15:實例 Component Dropdown
下一篇
用範例理解 Vue.js #17:Global API(extend, nextTick, directive)
系列文
用範例理解 Vue.js30

尚未有邦友留言

立即登入留言