劃重點，這是一道面試必考題，我就問過很多面試者這個問題，✧(≖ ◡ ≖✿)嘿嘿

首先這是一道非常棒的面試題，可以考察面試者的很多方面，比如基本功，代碼能力，邏輯能力，而且進可攻，退可守，針對不同級别的人可以考察不同難度，比如漂亮妹子就出1☆題，(*^__^*) 嘻嘻……

一般在面試者回答出問題後，我總能夠潇灑的再抛出一些問題，看着面試者露出驚異的眼神，默默一轉身，深藏功與名

本文我将給大家破解深拷貝的謎題，由淺入深，環環相扣，總共涉及4種深拷貝方式，每種方式都有自己的特點和個性

深拷貝 VS 淺拷貝

再開始之前需要先給同學科普下什麼是深拷貝，和深拷貝有關系的另個一術語是淺拷貝又是什麼意思呢？如果對這部分部分内容了解的同學可以跳過

其實深拷貝和淺拷貝都是針對的引用類型，JS中的變量類型分為值類型（基本類型）和引用類型；對值類型進行複制操作會對值進行一份拷貝，而對引用類型賦值，則會進行地址的拷貝，最終兩個變量指向同一份數據

// 基本類型 var a = 1; var b = a; a = 2; console.log(a, b); // 2, 1 ，a b指向不同的數據 // 引用類型指向同一份數據 var a = {c: 1}; var b = a; a.c = 2; console.log(a.c, b.c); // 2, 2 全是2，a b指向同一份數據 複制代碼

對于引用類型，會導緻a b指向同一份數據，此時如果對其中一個進行修改，就會影響到另外一個，有時候這可能不是我們想要的結果，如果對這種現象不清楚的話，還可能造成不必要的bug

那麼如何切斷a和b之間的關系呢，可以拷貝一份a的數據，根據拷貝的層級不同可以分為淺拷貝和深拷貝，淺拷貝就是隻進行一層拷貝，深拷貝就是無限層級拷貝

var a1 = {b: {c: {}}; var a2 = shallowClone(a1); // 淺拷貝 a2.b.c === a1.b.c // true var a3 = clone(a1); // 深拷貝 a3.b.c === a1.b.c // false 複制代碼

淺拷貝的實現非常簡單，而且還有多種方法，其實就是遍曆對象屬性的問題，這裡隻給出一種，如果看不懂下面的方法，或對其他方法感興趣，可以看我的這篇文章

function shallowClone(source) { var target = {}; for(var i in source) { if (source.hasOwnProperty(i)) { target[i] = source[i]; } } return target; } 複制代碼

最簡單的深拷貝

深拷貝的問題其實可以分解成兩個問題，淺拷貝 遞歸，什麼意思呢？假設我們有如下數據

var a1 = {b: {c: {d: 1}}; 複制代碼

隻需稍加改動上面淺拷貝的代碼即可，注意區别

function clone(source) { var target = {}; for(var i in source) { if (source.hasOwnProperty(i)) { if (typeof source[i] === 'object') { target[i] = clone(source[i]); // 注意這裡 } else { target[i] = source[i]; } } } return target; } 複制代碼

大部分人都能寫出上面的代碼，但當我問上面的代碼有什麼問題嗎？就很少有人答得上來了，聰明的你能找到問題嗎？

其實上面的代碼問題太多了，先來舉幾個例子吧

• 沒有對參數做檢驗
• 判斷是否對象的邏輯不夠嚴謹
• 沒有考慮數組的兼容

(⊙o⊙)，下面我們來看看各個問題的解決辦法，首先我們需要抽象一個判斷對象的方法，其實比較常用的判斷對象的方法如下，其實下面的方法也有問題，但如果能夠回答上來那就非常不錯了，如果完美的解決辦法感興趣，不妨看看這裡吧

function isObject(x) { return Object.prototype.toString.call(x) === '[object Object]'; } 複制代碼

函數需要校驗參數，如果不是對象的話直接返回

function clone(source) { if (!isObject(source)) return source; // xxx } 複制代碼

關于第三個問題，嗯，就留給大家自己思考吧，本文為了減輕大家的負擔，就不考慮數組的情況了，其實ES6之後還要考慮set, map, weakset, weakmap，/(ㄒoㄒ)/~~

其實吧這三個都是小問題，其實遞歸方法最大的問題在于爆棧，當數據的層次很深是就會棧溢出

下面的代碼可以生成指定深度和每層廣度的代碼，這段代碼我們後面還會再次用到

function createData(deep, breadth) { var data = {}; var temp = data; for (var i = 0; i < deep; i ) { temp = temp['data'] = {}; for (var j = 0; j < breadth; j ) { temp[j] = j; } } return data; } createData(1, 3); // 1層深度，每層有3個數據 {data: {0: 0, 1: 1, 2: 2}} createData(3, 0); // 3層深度，每層有0個數據 {data: {data: {data: {}}}} 複制代碼

當clone層級很深的話就會棧溢出，但數據的廣度不會造成溢出

clone(createData(1000)); // ok clone(createData(10000)); // Maximum call stack size exceeded clone(createData(10, 100000)); // ok 廣度不會溢出 複制代碼

其實大部分情況下不會出現這麼深層級的數據，但這種方式還有一個緻命的問題，就是循環引用，舉個例子

var a = {}; a.a = a; clone(a) // Maximum call stack size exceeded 直接死循環了有沒有，/(ㄒoㄒ)/~~ 複制代碼

關于循環引用的問題解決思路有兩種，一直是循環檢測，一種是暴力破解，關于循環檢測大家可以自己思考下；關于暴力破解我們會在下面的内容中詳細講解

一行代碼的深拷貝

有些同學可能見過用系統自帶的JSON來做深拷貝的例子，下面來看下代碼實現

function cloneJSON(source) { return JSON.parse(JSON.stringify(source)); } 複制代碼

其實我第一次簡單這個方法的時候，由衷的表示佩服，其實利用工具，達到目的，是非常聰明的做法

下面來測試下cloneJSON有沒有溢出的問題，看起來cloneJSON内部也是使用遞歸的方式

cloneJSON(createData(10000)); // Maximum call stack size exceeded 複制代碼

既然是用了遞歸，那循環引用呢？并沒有因為死循環而導緻棧溢出啊，原來是JSON.stringify内部做了循環引用的檢測，正是我們上面提到破解循環引用的第一種方法：循環檢測

var a = {}; a.a = a; cloneJSON(a) // Uncaught TypeError: Converting circular structure to JSON 複制代碼

破解遞歸爆棧

其實破解遞歸爆棧的方法有兩條路，第一種是消除尾遞歸，但在這個例子中貌似行不通，第二種方法就是幹脆不用遞歸，改用循環，當我提出用循環來實現時，基本上90%的前端都是寫不出來的代碼的，這其實讓我很震驚

舉個例子，假設有如下的數據結構

var a = { a1: 1, a2: { b1: 1, b2: { c1: 1 } } } 複制代碼

這不就是一個樹嗎，其實隻要把數據橫過來看就非常明顯了

a / \ a1 a2 | / \ 1 b1 b2 | | 1 c1 | 1 複制代碼

用循環遍曆一棵樹，需要借助一個棧，當棧為空時就遍曆完了，棧裡面存儲下一個需要拷貝的節點

首先我們往棧裡放入種子數據，key用來存儲放哪一個父元素的那一個子元素拷貝對象

然後遍曆當前節點下的子元素，如果是對象就放到棧裡，否則直接拷貝

function cloneLoop(x) { const root = {}; // 棧 const loopList = [ { parent: root, key: undefined, data: x, } ]; while(loopList.length) { // 深度優先 const node = loopList.pop(); const parent = node.parent; const key = node.key; const data = node.data; // 初始化賦值目标，key為undefined則拷貝到父元素，否則拷貝到子元素 let res = parent; if (typeof key !== 'undefined') { res = parent[key] = {}; } for(let k in data) { if (data.hasOwnProperty(k)) { if (typeof data[k] === 'object') { // 下一次循環 loopList.push({ parent: res, key: k, data: data[k], }); } else { res[k] = data[k]; } } } } return root; } 複制代碼

改用循環後，再也不會出現爆棧的問題了，但是對于循環引用依然無力應對

破解循環引用

有沒有一種辦法可以破解循環應用呢？别着急，我們先來看另一個問題，上面的三種方法都存在的一個問題就是引用丢失，這在某些情況下也許是不能接受的

舉個例子，假如一個對象a，a下面的兩個鍵值都引用同一個對象b，經過深拷貝後，a的兩個鍵值會丢失引用關系，從而變成兩個不同的對象，o(╯□╰)o

var b = {}; var a = {a1: b, a2: b}; a.a1 === a.a2 // true var c = clone(a); c.a1 === c.a2 // false 複制代碼

如果我們發現個新對象就把這個對象和他的拷貝存下來，每次拷貝對象前，都先看一下這個對象是不是已經拷貝過了，如果拷貝過了，就不需要拷貝了，直接用原來的，這樣我們就能夠保留引用關系了，✧(≖ ◡ ≖✿)嘿嘿

但是代碼怎麼寫呢，o(╯□╰)o，别急往下看，其實和循環的代碼大體一樣，不一樣的地方我用// ==========标注出來了

引入一個數組uniqueList用來存儲已經拷貝的數組，每次循環遍曆時，先判斷對象是否在uniqueList中了，如果在的話就不執行拷貝邏輯了

find是抽象的一個函數，其實就是遍曆uniqueList

// 保持引用關系 function cloneForce(x) { // ============= const uniqueList = []; // 用來去重 // ============= let root = {}; // 循環數組 const loopList = [ { parent: root, key: undefined, data: x, } ]; while(loopList.length) { // 深度優先 const node = loopList.pop(); const parent = node.parent; const key = node.key; const data = node.data; // 初始化賦值目标，key為undefined則拷貝到父元素，否則拷貝到子元素 let res = parent; if (typeof key !== 'undefined') { res = parent[key] = {}; } // ============= // 數據已經存在 let uniqueData = find(uniqueList, data); if (uniqueData) { parent[key] = uniqueData.target; continue; // 中斷本次循環 } // 數據不存在 // 保存源數據，在拷貝數據中對應的引用 uniqueList.push({ source: data, target: res, }); // ============= for(let k in data) { if (data.hasOwnProperty(k)) { if (typeof data[k] === 'object') { // 下一次循環 loopList.push({ parent: res, key: k, data: data[k], }); } else { res[k] = data[k]; } } } } return root; } function find(arr, item) { for(let i = 0; i < arr.length; i ) { if (arr[i].source === item) { return arr[i]; } } return null; } 複制代碼

下面來驗證一下效果，amazing

var b = {}; var a = {a1: b, a2: b}; a.a1 === a.a2 // true var c = cloneForce(a); c.a1 === c.a2 // true 複制代碼

接下來再說一下如何破解循環引用，等一下，上面的代碼好像可以破解循環引用啊，趕緊驗證一下

驚不驚喜，(*^__^*) 嘻嘻……

var a = {}; a.a = a; cloneForce(a) 複制代碼

看起來完美的cloneForce是不是就沒問題呢？cloneForce有兩個問題

第一個問題，所謂成也蕭何，敗也蕭何，如果保持引用不是你想要的，那就不能用cloneForce了；

第二個問題，cloneForce在對象數量很多時會出現很大的問題，如果數據量很大不适合使用cloneForce

性能對比

上邊的内容還是有點難度，下面我們來點更有難度的，對比一下不同方法的性能

我們先來做實驗，看數據，影響性能的原因有兩個，一個是深度，一個是每層的廣度，我們采用固定一個變量，隻讓一個變量變化的方式來測試性能

測試的方法是在指定的時間内，深拷貝執行的次數，次數越多，證明性能越好

下面的runTime是測試代碼的核心片段，下面的例子中，我們可以測試在2秒内運行clone(createData(500, 1)的次數

function runTime(fn, time) { var stime = Date.now(); var count = 0; while(Date.now() - stime < time) { fn(); count ; } return count; } runTime(function () { clone(createData(500, 1)) }, 2000); 複制代碼

下面來做第一個測試，将廣度固定在100，深度由小到大變化，記錄1秒内執行的次數

将上面的數據做成表格可以發現，一些規律

• 随着深度變小，相互之間的差異在變小
• clone和cloneLoop的差别并不大
• cloneLoop > cloneForce > cloneJSON

我們先來分析下各個方法的時間複雜度問題，各個方法要做的相同事情，這裡就不計算，比如循環對象，判斷是否為對象

• clone時間 = 創建遞歸函數 每個對象處理時間
• cloneJSON時間 = 循環檢測 每個對象處理時間 * 2 （遞歸轉字符串 遞歸解析）
• cloneLoop時間 = 每個對象處理時間
• cloneForce時間 = 判斷對象是否緩存中 每個對象處理時間

cloneJSON的速度隻有clone的50%，很容易理解，因為其會多進行一次遞歸時間

cloneForce由于要判斷對象是否在緩存中，而導緻速度變慢，我們來計算下判斷邏輯的時間複雜度，假設對象的個數是n，則其時間複雜度為O(n2)，對象的個數越多，cloneForce的速度會越慢

1 2 3 ... n = n^2/2 - 1 複制代碼

關于clone和cloneLoop這裡有一點問題，看起來實驗結果和推理結果不一緻，其中必有蹊跷

接下來做第二個測試，将深度固定在10000，廣度固定為0，記錄2秒内執行的次數

寬度clonecloneJSONcloneLoopcloneForce013400327214292989

排除寬度的幹擾，來看看深度對各個方法的影響

• 随着對象的增多，cloneForce的性能低下凸顯
• cloneJSON的性能也大打折扣，這是因為循環檢測占用了很多時間
• cloneLoop的性能高于clone，可以看出遞歸新建函數的時間和循環對象比起來可以忽略不計

下面我們來測試一下cloneForce的性能極限，這次我們測試運行指定次數需要的時間

var data1 = createData(2000, 0); var data2 = createData(4000, 0); var data3 = createData(6000, 0); var data4 = createData(8000, 0); var data5 = createData(10000, 0); cloneForce(data1) cloneForce(data2) cloneForce(data3) cloneForce(data4) cloneForce(data5) 複制代碼

通過測試發現，其時間成指數級增長，當對象個數大于萬級别，就會有300ms以上的延遲

總結

尺有所短寸有所長，無關乎好壞優劣，其實每種方法都有自己的優缺點，和适用場景，人盡其才，物盡其用，方是真理

下面對各種方法進行對比，希望給大家提供一些幫助

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!