前端面試的底氣之實現(xiàn)一個深拷貝
前言
深拷貝這個功能在開發(fā)中經(jīng)常使用到,特別在對引用類型的數(shù)據(jù)進行操作時,一般會先深拷貝一份賦值給一個變量,然后在對其操作,防止影響到其它使用該數(shù)據(jù)的地方。
如何實現(xiàn)一個深拷貝,在面試中出現(xiàn)頻率一直居高不下。因為在實現(xiàn)一個深拷貝過程中,可以看出應聘者很多方面的能力。
本專欄將從青銅到王者來介紹怎么實現(xiàn)一個深拷貝,以及每個段位對應的能力。
青銅段位
JSON.parse(JSON.stringify(data))
這種寫法非常簡單,而且可以應對大部分的應用場景,但是它有很大缺陷的。如果你不知道它有那些缺陷,而且這種實現(xiàn)方法體現(xiàn)不出你任何能力,所以這種實現(xiàn)方法處于青銅段位。
- 如果對象中存在循環(huán)引用的情況也無法正確實現(xiàn)深拷貝。
const a = { b: 1, } a.c = a; JSON.parse(JSON.stringify(a));
- 如果 data 里面有時間對象,則
JSON.stringify
后再JSON.parse
的結果,時間將只是字符串的形式。而不是時間對象。
const a = { b: new Date(1536627600000), } console.log(JSON.parse(JSON.stringify(a)))
- 如果 data 里有RegExp、Error對象,則序列化的結果將只得到空對象;
const a = { b: new RegExp(/\d/), c: new Error('錯誤') } console.log(JSON.parse(JSON.stringify(a)))
- 如果 data 里有函數(shù),undefined,則序列化的結果會把函數(shù)置為undefined或丟失;
const a = { b: function (){ console.log(1) }, c:1, d:undefined } console.log(JSON.parse(JSON.stringify(a)))
- 如果 data 里有NaN、Infinity和-Infinity,則序列化的結果會變成null
const a = { b: NaN, c: 1.7976931348623157E+10308, d: -1.7976931348623157E+10308, } console.log(JSON.parse(JSON.stringify(a)))
白銀段位
深拷貝的核心就是對引用類型的數(shù)據(jù)的拷貝處理。
function deepClone(target){ if(target !== null && typeof target === 'object'){ let result = {} for (let k in target){ if (target.hasOwnProperty(k)) { result[k] = deepClone(target[k]) } } return result; }else{ return target; } }
以上代碼中,deepClone函數(shù)的參數(shù) target 是要深拷貝的數(shù)據(jù)。
執(zhí)行 target !== null && typeof target === 'object'
判斷 target 是不是引用類型。
若不是,直接返回 target。
若是,創(chuàng)建一個變量 result 作為深拷貝的結果,遍歷 target,執(zhí)行 deepClone(target[k])
把 target 每個屬性的值深拷貝后賦值到深拷貝的結果對應的屬性 result[k] 上,遍歷完畢后返回 result。
在執(zhí)行 deepClone(target[k])
中,又會對 target[k] 進行類型判斷,重復上述流程,形成了一個遞歸調(diào)用 deepClone 函數(shù)的過程。就可以層層遍歷要拷貝的數(shù)據(jù),不管要拷貝的數(shù)據(jù)有多少子屬性,只要子屬性的值的類型是引用類型,就會調(diào)用 deepClone 函數(shù)將其深拷貝后賦值到深拷貝的結果對應的屬性上。
另外使用 for...in
循環(huán)遍歷對象的屬性時,其原型鏈上的所有屬性都將被訪問,如果只要只遍歷對象自身的屬性,而不遍歷繼承于原型鏈上的屬性,要使用 hasOwnProperty 方法過濾一下。
在這里可以向面試官展示你的三個編程能力。
- 對原始類型和引用類型數(shù)據(jù)的判斷能力。
- 對遞歸思維的應用的能力。
- 深入理解for...in的用法。
黃金段位
白銀段位的代碼中只考慮到了引用類型的數(shù)據(jù)是對象的情況,漏了對引用類型的數(shù)據(jù)是數(shù)組的情況。
function deepClone(target){ if(target !== null && typeof target === 'object'){ let result = Object.prototype.toString.call(target) === "[object Array]" ? [] : {}; for (let k in target){ if (target.hasOwnProperty(k)) { result[k] = deepClone(target[k]) } } return result; }else{ return target; } }
以上代碼中,只是額外增加對參數(shù) target 是否是數(shù)組的判斷。執(zhí)行 Object.prototype.toString.call(target) === "[object Array]"
判斷 target 是不是數(shù)組,若是數(shù)組,變量result 為 [],若不是數(shù)組,變量result 為 {}。
在這里可以向面試官展示你的兩個編程能力。
- 正確理解引用類型概念的能力。
- 精確判斷數(shù)據(jù)類型的能力。
鉑金段位
假設要深拷貝以下數(shù)據(jù) data
let data = { a: 1 }; data.f=data
執(zhí)行 deepClone(data)
,會發(fā)現(xiàn)控制臺報錯,錯誤信息如下所示。
這是因為遞歸進入死循環(huán)導致棧內(nèi)存溢出了。根本原因是 data 數(shù)據(jù)存在循環(huán)引用,即對象的屬性間接或直接的引用了自身。
function deepClone(target) { function clone(target, map) { if (target !== null && typeof target === 'object') { let result = Object.prototype.toString.call(target) === "[object Array]" ? [] : {}; if (map[target]) { return map[target]; } map[target] = result; for (let k in target) { if (target.hasOwnProperty(k)) { result[k] = clone(target[k],map) } } return result; } else { return target; } } let map = new Map(); const result = clone(target, map); map.clear(); map = null; return result }
以上代碼中利用額外的變量 map 來存儲當前對象和拷貝對象的對應關系,當需要拷貝當前對象時,先去 map 中找,有沒有拷貝過這個對象,如果有的話直接返回,如果沒有的話繼續(xù)拷貝,這樣就巧妙化解的循環(huán)引用的問題。
之所以采用 ES6 中 Map 數(shù)據(jù)結構,是因為相對于普通的 Object 結構,其鍵值不限于字符串,各種類型的值(包括對象)都可以當作鍵。換句話來說。Object 結構提供了“字符串——值”的對應,Map 結構提供了“值——值” 的對應。若采用 Object 結構,當 target 不是字符串時,那么其鍵值全部都是 [Object Object]
,會引起混亂。
最后需要執(zhí)行 map.clear();map = null;
,釋放內(nèi)存,防止內(nèi)存泄露。
在這里可以向面試官展示你的三個編程能力。
- 對循環(huán)引用的理解,如何解決循環(huán)引用引起的問題的能力。
- 熟悉 ES6 中 Map 數(shù)據(jù)結構的概念及應用
- 對內(nèi)存泄露的認識和避免泄露的能力。
磚石段位
該段位要考慮性能問題了。上面用 Map 來解決循環(huán)引用的問題。但是最后一定要執(zhí)行 map.clear();map = null;
,釋放內(nèi)存,防止內(nèi)存泄露。
也可以使用 WeakMap 來解決循環(huán)引用。WeakMap 數(shù)據(jù)結構和 Map 數(shù)據(jù)結構,有兩點區(qū)別:
WeakMap 只接受對象作為鍵名( null 除外),不接受其他類型的值作為鍵名。但是 target 正好符合要求故不影響。
WeakMap 的鍵名所指向的對象不計入垃圾回收機制。這里用下面的例子來解釋。
let map = new WeakMap(); let obj = {a : 1} map.set(obj , 1);
現(xiàn)代瀏覽器GC回收策略,采用計算引用次來回收,就是某個對象被引用的次數(shù)為 1,因為 map 中的鍵名 obj 和對象 obj 之間的引用是弱引用,也就是不計入引用次數(shù),對象 obj 被引用的次數(shù)還是 1。 當執(zhí)行 obj = null
后,執(zhí)行GC回收時,對象 obj 被引用的次數(shù)變成 0 ,故會把 obj 所占的內(nèi)存釋放掉。
但是如果 map 是 Map 數(shù)據(jù)結構,因為 Map 的鍵名所引用的對象是強引用,就算執(zhí)行 obj = null
后,再執(zhí)行GC回收,Map 的鍵名 obj 對所引用的對象 obj 還是有引用,那么obj 被引用的次數(shù)還是 1,故 obj 所占的內(nèi)存釋放不掉。
所以使用 WeakMap 可以防止忘記把 map 置為 null 導致的內(nèi)存泄漏。然而 WeakMap 這種弱引用,僅僅只是為了防止內(nèi)存泄漏嗎?其還有個特性,當執(zhí)行 obj = null
,相當對象 obj 被GC回收了,但是執(zhí)行 map.get(obj)
得到的值還是 1。我們可以利用這個特性來做一下性能優(yōu)化。
在深拷貝的代碼中。是使用拷貝的對象作為鍵名的,設想一下,當拷貝的對象非常龐大時,導致 map 會占用很大的內(nèi)存。
如果 map 使用 Map 數(shù)據(jù)結構,因為 Map 的鍵名所引用的對象是強引用,所以在瀏覽器定時執(zhí)行GC回收時,除非手動清除 Map 這個鍵值對,才能把這個拷貝對象所占用的內(nèi)存釋放掉。
如果 map 使用 WeakMap 數(shù)據(jù)結構,因為 WeakMap 的鍵名所引用的對象是弱引用,所以在瀏覽器會定時執(zhí)行GC回收,會直接把這個拷貝對象所占用的內(nèi)存釋放掉,那么這樣是不是對內(nèi)存占用減少,間接優(yōu)化了代碼運行性能。
此外在上面的代碼中,我們遍歷數(shù)組和對象都使用了 for...in
這種方式,實際上 for...in
在遍歷時效率是非常低的,故用效率比較高的 while 來遍歷。
function deepClone(target) { /** * 遍歷數(shù)據(jù)處理函數(shù) * @array 要處理的數(shù)據(jù) * @callback 回調(diào)函數(shù),接收兩個參數(shù) value 每一項的值 index 每一項的下標或者key。 */ function handleWhile(array, callback) { const length = array.length; let index = -1; while (++index < length) { callback(array[index], index) } } function clone(target, map) { if (target !== null && typeof target === 'object') { let result = Object.prototype.toString.call(target) === "[object Array]" ? [] : {}; // 解決循環(huán)引用 if (map.has(target)) { return map.get(target); } map.set(target, result); const keys = Object.prototype.toString.call(target) === "[object Array]" ? undefined : Object.keys( target); function callback(value, key) { if (keys) { // 如果keys存在則說明value是一個對象的key,不存在則說明key就是數(shù)組的下標。 key = value; } result[key] = clone(target[key], map) } handleWhile(keys || target, callback) return result; } else { return target; } } let map = new WeakMap(); const result = clone(target,map); map = null; return result }
用 while 遍歷的深拷貝記為 deepClone,把用 for ... in
遍歷的深拷貝記為 deepClone1。利用 console.time()
和 console.timeEnd()
來計算執(zhí)行時間。
let arr = []; for (let i = 0; i < 1000000; i++) { arr.push(i) } let data = { a: arr }; console.time(); const result = deepClone(data); console.timeEnd(); console.time(); const result1 = deepClone1(data); console.timeEnd();
從上圖明顯可以看到用 while 遍歷的深拷貝的性能遠優(yōu)于用 for ... in
遍歷的深拷貝。
在這里可以向面試官展示你的五個編程能力。
- 熟悉 ES6 中 WeakMap 數(shù)據(jù)結構的概念及應用
- 具有優(yōu)化代碼運行性能的能力。
- 了解遍歷的效率的能力。
- 了解
++i
和i++
的區(qū)別。 - 代碼抽象的能力。
星耀段位
在這個階段應該考慮代碼邏輯的嚴謹性。在上面段位的代碼雖然已經(jīng)滿足平時開發(fā)的需求,但是還是有幾處邏輯不嚴謹?shù)牡胤健?/p>
判斷數(shù)據(jù)不是引用類型時就直接返回 target,但是原始類型中還有 Symbol 這一特殊類型的數(shù)據(jù),因為其每個 Symbol 都是獨一無二,需要額外拷貝處理,不能直接返回。
判斷數(shù)據(jù)是不是引用類型時不嚴謹,漏了
typeof target === function'
的判斷。只考慮了 Array、Object 兩種引用類型數(shù)據(jù)的處理,引用類型的數(shù)據(jù)還有Function 函數(shù)、Date 日期、RegExp 正則、Map 數(shù)據(jù)結構、Set 數(shù)據(jù)機構,其中 Map 、Set 屬于 ES6 的。
廢話不多說,直接貼上全部代碼,代碼中有注釋。
function deepClone(target) { // 獲取數(shù)據(jù)類型 function getType(target) { return Object.prototype.toString.call(target) } //判斷數(shù)據(jù)是不是引用類型 function isObject(target) { return target !== null && (typeof target === 'object' || typeof target === 'function'); } //處理不需要遍歷的應引用類型數(shù)據(jù) function handleOherData(target) { const type = getType(target); switch (type) { case "[object Date]": return new Date(target) case "[object RegExp]": return cloneReg(target) case "[object Function]": return cloneFunction(target) } } //拷貝Symbol類型數(shù)據(jù) function cloneSymbol(targe) { const a = String(targe); //把Symbol字符串化 const b = a.substring(7, a.length - 1); //取出Symbol()的參數(shù) return Symbol(b); //用原先的Symbol()的參數(shù)創(chuàng)建一個新的Symbol } //拷貝正則類型數(shù)據(jù) function cloneReg(target) { const reFlags = /\w*$/; const result = new target.constructor(target.source, reFlags.exec(target)); result.lastIndex = target.lastIndex; return result; } //拷貝函數(shù) function cloneFunction(targe) { //匹配函數(shù)體的正則 const bodyReg = /(?<={)(.|\n)+(?=})/m; //匹配函數(shù)參數(shù)的正則 const paramReg = /(?<=\().+(?=\)\s+{)/; const targeString = targe.toString(); //利用prototype來區(qū)分下箭頭函數(shù)和普通函數(shù),箭頭函數(shù)是沒有prototype的 if (targe.prototype) { //普通函數(shù) const param = paramReg.exec(targeString); const body = bodyReg.exec(targeString); if (body) { if (param) { const paramArr = param[0].split(','); //使用 new Function 重新構造一個新的函數(shù) return new Function(...paramArr, body[0]); } else { return new Function(body[0]); } } else { return null; } } else { //箭頭函數(shù) //eval和函數(shù)字符串來重新生成一個箭頭函數(shù) return eval(targeString); } } /** * 遍歷數(shù)據(jù)處理函數(shù) * @array 要處理的數(shù)據(jù) * @callback 回調(diào)函數(shù),接收兩個參數(shù) value 每一項的值 index 每一項的下標或者key。 */ function handleWhile(array, callback) { let index = -1; const length = array.length; while (++index < length) { callback(array[index], index); } } function clone(target, map) { if (isObject(target)) { let result = null; if (getType(target) === "[object Array]") { result = [] } else if (getType(target) === "[object Object]") { result = {} } else if (getType(target) === "[object Map]") { result = new Map(); } else if (getType(target) === "[object Set]") { result = new Set(); } // 解決循環(huán)引用 if (map.has(target)) { return map.get(target); } map.set(target, result); if (getType(target) === "[object Map]") { target.forEach((value, key) => { result.set(key, clone(value, map)); }); return result; } else if (getType(target) === "[object Set]") { target.forEach(value => { result.add(clone(value, map)); }); return result; } else if (getType(target) === "[object Object]" || getType(target) === "[object Array]") { const keys = getType(target) === "[object Array]" ? undefined : Object.keys(target); function callback(value, key) { if (keys) { // 如果keys存在則說明value是一個對象的key,不存在則說明key就是數(shù)組的下標。 key = value } result[key] = clone(target[key], map) } handleWhile(keys || target, callback) } else { result = handleOherData(target) } return result; } else { if (getType(target) === "[object Symbol]") { return cloneSymbol(target) } else { return target; } } } let map = new WeakMap; const result = clone(target, map); map = null; return result }
在這里可以向面試官展示你的六個編程能力。
- 代碼邏輯的嚴謹性。
- 深入了解數(shù)據(jù)類型的能力。
- JS Api 的熟練使用的能力。
- 了解箭頭函數(shù)和普通函數(shù)的區(qū)別。
- 熟練使用正則表達式的能力。
- 模塊化開發(fā)的能力
王者段位
以上代碼中還有很多數(shù)據(jù)類型的拷貝,沒有實現(xiàn),有興趣的話可以在評論中實現(xiàn)一下,王者屬于你哦!
總結
綜上所述,面試官叫你實現(xiàn)一個深拷貝,其實是要考察你各方面的能力。例如
- 白銀段位
- 對原始類型和引用類型數(shù)據(jù)的判斷能力。
- 對遞歸思維的應用的能力。
- 黃金段位
- 正確理解引用類型概念的能力。
- 精確判斷數(shù)據(jù)類型的能力。
- 鉑金段位
- 對循環(huán)引用的理解,如何解決循環(huán)引用引起的問題的能力。
- 熟悉 ES6 中 Map 數(shù)據(jù)結構的概念及應用。
- 對內(nèi)存泄露的認識和避免泄露的能力。
- 磚石段位
- 熟悉 ES6 中 WeakMap 數(shù)據(jù)結構的概念及應用。
- 具有優(yōu)化代碼運行性能的能力。
- 了解遍歷的效率的能力。
- 了解
++i
和i++
的區(qū)別。 - 代碼抽象的能力。
- 星耀段位
- 代碼邏輯的嚴謹性。
- 深入了解數(shù)據(jù)類型的能力。
- JS Api 的熟練使用的能力。
- 了解箭頭函數(shù)和普通函數(shù)的區(qū)別。
- 熟練使用正則表達式的能力。
- 模塊化開發(fā)的能力
所以不要去死記硬背一些手寫代碼的面試題,最好自己動手寫一下,看看自己達到那個段位了。
到此這篇關于前端面試的底氣之實現(xiàn)一個深拷貝的文章就介紹到這了,更多相關深拷貝實現(xiàn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
使用json來定義函數(shù),在里面可以定義多個函數(shù)的實現(xiàn)方法
下面小編就為大家?guī)硪黄褂胘son來定義函數(shù),在里面可以定義多個函數(shù)的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10