前言
深拷貝這個功能在開發中常用到，特別在對引用類型的數據進行操做時，通常會先深拷貝一份賦值給一個變量，而後在對其操做，防止影響到其它使用該數據的地方。面試
如何實現一個深拷貝，在面試中出現頻率一直居高不下。由於在實現一個深拷貝過程當中，能夠看出應聘者不少方面的能力。正則表達式
本專欄將從青銅到王者來介紹怎麼實現一個深拷貝，以及每一個段位對應的能力。編程
青銅段位
JSON.parse(JSON.stringify(data)) 複製代碼
這種寫法很是簡單，並且能夠應對大部分的應用場景，可是它有很大缺陷的。若是你不知道它有那些缺陷，並且這種實現方法體現不出你任何能力，因此這種實現方法處於青銅段位。數組
- 若是對象中存在循環引用的狀況也沒法正確實現深拷貝。
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裏有函數，undefined，則序列化的結果會把函數置爲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)))
白銀段位
深拷貝的核心就是對引用類型的數據的拷貝處理。數據結構
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函數的參數 target 是要深拷貝的數據。模塊化
執行 target !== null && typeof target === 'object' 判斷 target 是否是引用類型。函數
若不是，直接返回 target。性能
如果，建立一個變量 result 做爲深拷貝的結果，遍歷 target，執行 deepClone(target[k]) 把 target 每一個屬性的值深拷貝後賦值到深拷貝的結果對應的屬性 result[k] 上，遍歷完畢後返回 result。優化
在執行 deepClone(target[k]) 中，又會對 target[k] 進行類型判斷，重複上述流程，造成了一個遞歸調用 deepClone 函數的過程。就能夠層層遍歷要拷貝的數據，無論要拷貝的數據有多少子屬性，只要子屬性的值的類型是引用類型，就會調用 deepClone 函數將其深拷貝後賦值到深拷貝的結果對應的屬性上。prototype
另外使用 for...in 循環遍歷對象的屬性時，其原型鏈上的全部屬性都將被訪問，若是隻要只遍歷對象自身的屬性，而不遍歷繼承於原型鏈上的屬性，要使用 hasOwnProperty 方法過濾一下。
在這裏能夠向面試官展現你的三個編程能力。
- 對原始類型和引用類型數據的判斷能力。
- 對遞歸思惟的應用的能力。
- 深刻理解
for...in的用法。
黃金段位
白銀段位的代碼中只考慮到了引用類型的數據是對象的狀況，漏了對引用類型的數據是數組的狀況。
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;
}
}
以上代碼中，只是額外增長對參數 target 是不是數組的判斷。執行 Object.prototype.toString.call(target) === "[object Array]" 判斷 target 是否是數組，如果數組，變量result 爲 []，若不是數組，變量result 爲 {}。
在這裏能夠向面試官展現你的兩個編程能力。
- 正確理解引用類型概念的能力。
- 精確判斷數據類型的能力。
鉑金段位
假設要深拷貝如下數據 data
let data = {
a: 1
};
data.f=data
執行 deepClone(data)，會發現控制檯報錯，錯誤信息以下所示。
這是由於遞歸進入死循環致使棧內存溢出了。根本緣由是 data 數據存在循環引用，即對象的屬性間接或直接的引用了自身。
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] = deepClone(target[k])
}
}
return result;
} else {
return target;
}
}
let map = {}
const result = clone(target, map);
map = null;
return result
}
以上代碼中利用額外的變量 map 來存儲當前對象和拷貝對象的對應關係，當須要拷貝當前對象時，先去 map 中找，有沒有拷貝過這個對象，若是有的話直接返回，若是沒有的話繼續拷貝，這樣就巧妙化解的循環引用的問題。最後須要把變量 map 置爲 null ，釋放內存，防止內存泄露。
在這裏能夠向面試官展現你的兩個編程能力。
- 對循環引用的理解，如何解決循環引用引發的問題的能力。
- 對內存泄露的認識和避免泄露的能力。
磚石段位
該段位要考慮性能問題了。在上面的代碼中，咱們遍歷數組和對象都使用了 for...in 這種方式，實際上 for...in 在遍歷時效率是很是低的，故用效率比較高的 while 來遍歷。
function deepClone(target) {
/**
* 遍歷數據處理函數
* @array 要處理的數據
* @callback 回調函數，接收兩個參數 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]" ? [] : {};
if (map[target]) {
return map[target];
}
map[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就是數組的下標。
key = value;
}
result[key] = clone(target[key], map)
}
handleWhile(keys || target, callback)
return result;
} else {
return target;
}
}
let map = {}
const result = clone(target, map);
map = null;
return result
}
用 while 遍歷的深拷貝記爲 deepClone，把用 for ... in 遍歷的深拷貝記爲 deepClone1。利用 console.time() 和 console.timeEnd() 來計算執行時間。
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 遍歷的深拷貝的性能遠優於用 for ... in 遍歷的深拷貝。
在這裏能夠向面試官展現你的四個編程能力。
- 具備優化代碼運行性能的能力。
- 瞭解遍歷的效率的能力。
- 瞭解
++i和i++的區別。 - 代碼抽象的能力。
星耀段位
在這個階段應該考慮代碼邏輯的嚴謹性。在上面段位的代碼雖然已經知足平時開發的需求，可是仍是有幾處邏輯不嚴謹的地方。
-
判斷數據不是引用類型時就直接返回
target，可是原始類型中還有 Symbol 這一特殊類型的數據，由於其每一個 Symbol 都是獨一無二，須要額外拷貝處理，不能直接返回。 -
判斷數據是否是引用類型時不嚴謹，漏了
typeof target === function'的判斷。 -
只考慮了 Array、Object 兩種引用類型數據的處理，引用類型的數據還有Function 函數、Date 日期、RegExp 正則、Map 數據結構、Set 數據機構，其中 Map 、Set 屬於 ES6 的。
廢話很少說，直接貼上所有代碼，代碼中有註釋。
function deepClone(target) {
// 獲取數據類型
function getType(target) {
return Object.prototype.toString.call(target)
}
//判斷數據是否是引用類型
function isObject(target) {
return target !== null && (typeof target === 'object' || typeof target === 'function');
}
//處理不須要遍歷的應引用類型數據
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類型數據
function cloneSymbol(targe) {
const a = String(targe); //把Symbol字符串化
const b = a.substring(7, a.length - 1); //取出Symbol()的參數
return Symbol(b); //用原先的Symbol()的參數建立一個新的Symbol
}
//拷貝正則類型數據
function cloneReg(target) {
const reFlags = /\w*$/;
const result = new target.constructor(target.source, reFlags.exec(target));
result.lastIndex = target.lastIndex;
return result;
}
//拷貝函數
function cloneFunction(targe) {
//匹配函數體的正則
const bodyReg = /(?<={)(.|\n)+(?=})/m;
//匹配函數參數的正則
const paramReg = /(?<=\().+(?=\)\s+{)/;
const targeString = targe.toString();
//利用prototype來區分下箭頭函數和普通函數，箭頭函數是沒有prototype的
if (targe.prototype) { //普通函數
const param = paramReg.exec(targeString);
const body = bodyReg.exec(targeString);
if (body) {
if (param) {
const paramArr = param[0].split(',');
//使用 new Function 從新構造一個新的函數
return new Function(...paramArr, body[0]);
} else {
return new Function(body[0]);
}
} else {
return null;
}
} else { //箭頭函數
//eval和函數字符串來從新生成一個箭頭函數
return eval(targeString);
}
}
/**
* 遍歷數據處理函數
* @array 要處理的數據
* @callback 回調函數，接收兩個參數 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();
}
//解決循環引用
if (map[target]) {
return map[target];
}
map[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就是數組的下標。
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 = {}
const result = clone(target, map);
map = null;
return result
}
在這裏能夠向面試官展現你的六個編程能力。
- 代碼邏輯的嚴謹性。
- 深刻了解數據類型的能力。
- JS Api 的熟練使用的能力。
- 瞭解箭頭函數和普通函數的區別。
- 熟練使用正則表達式的能力。
- 模塊化開發的能力
王者段位
以上代碼中還有不少數據類型的拷貝，沒有實現，有興趣的話能夠在評論中實現一下，王者屬於你哦！
總結
綜上所述，面試官叫你實現一個深拷貝，實際上是要考察你各方面的能力。例如
- 白銀段位
- 對原始類型和引用類型數據的判斷能力。
- 對遞歸思惟的應用的能力。
- 黃金段位
- 正確理解引用類型概念的能力。
- 精確判斷數據類型的能力。
- 鉑金段位
- 對循環引用的理解，如何解決循環引用引發的問題的能力。
- 對內存泄露的認識和避免泄露的能力。
- 磚石段位
- 具備優化代碼運行性能的能力。
- 瞭解遍歷的效率的能力。
- 瞭解
++i和i++的區別。 - 代碼抽象的能力。
- 星耀段位
- 代碼邏輯的嚴謹性。
- 深刻了解數據類型的能力。
- JS Api 的熟練使用的能力。
- 瞭解箭頭函數和普通函數的區別。
- 熟練使用正則表達式的能力。
- 模塊化開發的能力
因此不要去死記硬背一些手寫代碼的面試題，最好本身動手寫一下，看看本身達到那個段位了。
最後
對於大廠面試，我最後想要強調的一點就是心態真的很重要，是決定你在面試過程當中發揮的關鍵，若不能正常發揮，極可能就由於一個小失誤與offer失之交臂，因此必定要重視起來。另外提醒一點，充分複習，是消除你緊張的心理狀態的關鍵，但你複習充分了，天然面試過程當中就要有底氣得多。
我平時一直有整理面試題的習慣，有隨時跳出溫馨圈的準備，不知不覺整理了229頁了，在這裏分享給你們，有須要的點擊這裏免費領取題目+解析PDF
篇幅有限，僅展現部份內容
若是你須要這份完整版的面試題+解析，【點擊我】就能夠了。
但願你們明年的金三銀四面試順利，拿下本身心儀的offer！