JavaScript 專題系列第六篇，講解深淺拷貝的技巧和以及實現深淺拷貝的思路

拷貝也是面試經典吶！

數組的淺拷貝

若是是數組，咱們能夠利用數組的一些方法好比：slice、concat 返回一個新數組的特性來實現拷貝。

好比：

 

var arr = ['old', 1, true, null, undefined]; var new_arr = arr.concat(); new_arr[0] = 'new'; console.log(arr) // ["old", 1, true, null, undefined] console.log(new_arr) // ["new", 1, true, null, undefined]

用 slice 能夠這樣作：

 

var new_arr = arr.slice();

可是若是數組嵌套了對象或者數組的話，好比：

 

var arr = [{old: 'old'}, ['old']]; var new_arr = arr.concat(); arr[0].old = 'new'; arr[1][0] = 'new'; console.log(arr) // [{old: 'new'}, ['new']] console.log(new_arr) // [{old: 'new'}, ['new']]

咱們會發現，不管是新數組仍是舊數組都發生了變化，也就是說使用 concat 方法，克隆的並不完全。

若是數組元素是基本類型，就會拷貝一份，互不影響，而若是是對象或者數組，就會只拷貝對象和數組的引用，這樣咱們不管在新舊數組進行了修改，二者都會發生變化。

咱們把這種複製引用的拷貝方法稱之爲淺拷貝，與之對應的就是深拷貝，深拷貝就是指徹底的拷貝一個對象，即便嵌套了對象，二者也相互分離，修改一個對象的屬性，神馬影院也不會影響另外一個。

因此咱們能夠看出使用 concat 和 slice 是一種淺拷貝。

數組的深拷貝

那如何深拷貝一個數組呢？這裏介紹一個技巧，不只適用於數組還適用於對象！那就是：

 

var arr = ['old', 1, true, ['old1', 'old2'], {old: 1}] var new_arr = JSON.parse( JSON.stringify(arr) ); console.log(new_arr);

是一個簡單粗暴的好方法，就是有一個問題，不能拷貝函數，咱們作個試驗：

 

var arr = [function(){ console.log(a) }, { b: function(){ console.log(b) } }] var new_arr = JSON.parse(JSON.stringify(arr)); console.log(new_arr);

咱們會發現 new_arr 變成了：

淺拷貝的實現

以上三個方法 concat、slice、JSON.stringify 都算是技巧類，能夠根據實際項目狀況選擇使用，接下來咱們思考下如何實現一個對象或者數組的淺拷貝。

想想，好像很簡單，遍歷對象，而後把屬性和屬性值都放在一個新的對象不就行了~

嗯，就是這麼簡單，注意幾個小點就能夠了：

 

var shallowCopy = function(obj) { // 只拷貝對象 if (typeof obj !== 'object') return; // 根據obj的類型判斷是新建一個數組仍是對象 var newObj = obj instanceof Array ? [] : {}; // 遍歷obj，而且判斷是obj的屬性才拷貝 for (var key in obj) { if (obj.hasOwnProperty(key)) { newObj[key] = obj[key]; } } return newObj; }

深拷貝的實現

那如何實現一個深拷貝呢？提及來也好簡單，咱們在拷貝的時候判斷一下屬性值的類型，若是是對象，咱們遞歸調用深拷貝函數不就行了~

 

var deepCopy = function(obj) { if (typeof obj !== 'object') return; var newObj = obj instanceof Array ? [] : {}; for (var key in obj) { if (obj.hasOwnProperty(key)) {  newObj[key] = typeof obj[key] === 'object' ? www.10rz.net/deepCopy(obj[key]) : obj[key]; } } return newObj; }

性能問題

儘管使用深拷貝會徹底的克隆一個新對象，不會產生反作用，可是深拷貝由於使用遞歸，性能會不如淺拷貝，在開發中，仍是要根據實際狀況進行選擇。

下期預告

難道到這裏就結束了？是的。然而本篇其實是一個鋪墊，咱們真正要看的是 jquery 的 extend 函數的實現，下一篇，咱們會講一講如何從零實現一個 jquery 的 extend 函數。