這篇文章主要為大家展示了JS中如何實現深拷貝，內容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。
在面試中你是否遇到過如下場景：
Q：小朋友，你是否了解如何拷貝一個對象？
R：此時，機智的你可能會想到
Object.assign({}, obj);Q：那如何深拷貝一個對象呢？
R：機智的你
JSON.parse(JSON.stringify(obj));
Q：使用stringify這種方式有何弊端？
Q：那你能自己實現個深拷貝函數？
R：如下：
const deepClone = (obj) => {
// 非引用類型及函數將直接返回
if (!obj || typeof obj !== 'object') return obj;
// 特殊的引用類型處理
switch(Object.prototype.toString.call(obj).slice(8, -1)) {
case 'Date':
return new Date(obj);
break;
case 'RegExp':
return new RegExp(obj);
break;
case 'String':
return new String(obj);
break;
case 'Number':
return new Number(obj);
break;
case 'Boolean':
return new Boolean(obj);
break;
}
const result = obj instanceof Array ? [] : {};
for (let propName in obj) {
if (obj.hasOwnProperty(propName)) {
result[propName] = deepClone(obj[propName]);
}
}
return result;
}優點：實現了大多數數據類型的拷貝，所有非引用類型及引用類型的String Number Boolean Function Array Date RegExp
缺點：未考慮一些特殊的引用類型如Error Math Symbol Map Set JSON，函數屬于引用拷貝，未解決循環引用的問題
Q：如何解決循環引用？
R：將父層級的數據緩存對比（可以順帶解決同層（非同層）同引用的問題）
const deepClone = (obj) => {
// 非引用類型及函數將直接返回
if (!obj || typeof obj !== 'object') return obj;
// 特殊的引用類型處理
switch (Object.prototype.toString.call(obj).slice(8, -1)) {
case 'Date':
return new Date(obj);
break;
case 'RegExp':
return new RegExp(obj);
break;
case 'String':
return new String(obj);
break;
case 'Number':
return new Number(obj);
break;
case 'Boolean':
return new Boolean(obj);
break;
}
const map = deepClone.map = deepClone.map || new Map();
// 使用map結構可以不必循環緩存，提高效率
if (map.get(obj)) {
return map.get(obj);
}
const result = obj instanceof Array ? [] : {};
// 如果仔細觀察可以發現解決了同層同引用的問題
map.set(obj, result);
for (let propName in obj) {
if (obj.hasOwnProperty(propName)) {
result[propName] = deepClone(obj[propName]);
}
}
return result;
}Q：為什么函數還是指向原來的函數，而不創建新函數？
R：理論下函數也可以通過new Function(code)來創建新的函數，但是如果遇到閉包函數，我們無法得到原函數的外層定義的變量及其原有作用域鏈，這些在JS詞法解析時完成的步驟我們無法得知，所有只能引用原函數比較好。
Sum: 上面實現的缺點主要是沒有完全覆蓋特殊引用類型，但其實我們平時應該不會遇到那些類型，所以可以湊合使用。如果還有其它的問題沒有考慮到或者有出錯的，希望大家可以幫忙指出。
以上就是關于JS中如何實現深拷貝的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
