這篇文章主要為大家展示了JS中如何實(shí)現(xiàn)深拷貝，內(nèi)容簡而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會(huì)有收獲的，下面讓小編帶大家一起來看看吧。

十余年的阜城網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整阜城建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)公司從事“阜城網(wǎng)站設(shè)計(jì)”,“阜城網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

在面試中你是否遇到過如下場景：

Q：小朋友，你是否了解如何拷貝一個(gè)對(duì)象？

R：此時(shí)，機(jī)智的你可能會(huì)想到

Object.assign({}, obj);

Q：那如何深拷貝一個(gè)對(duì)象呢？

R：機(jī)智的你

JSON.parse(JSON.stringify(obj));

Q：使用stringify這種方式有何弊端？

1. 性能問題，stringify再解析其實(shí)需要耗費(fèi)較多時(shí)間，特別是數(shù)據(jù)量大的時(shí)候。
2. 一些類型無法拷貝，例如函數(shù)(不輸出)，正則(輸出空對(duì)象)，時(shí)間對(duì)象(輸出時(shí)間字符串)，Undefiend(不輸出)
3. 遇到循環(huán)引用的對(duì)象會(huì)出錯(cuò)
4. 同層（非同層）同引用的問題，理論下兩個(gè)key對(duì)應(yīng)的val如果指向同一個(gè)對(duì)象，拷貝也應(yīng)該指向一個(gè)相同新地址才對(duì)

Q：那你能自己實(shí)現(xiàn)個(gè)深拷貝函數(shù)？

R：如下：

const deepClone = (obj) => {
 // 非引用類型及函數(shù)將直接返回
 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;
}

優(yōu)點(diǎn)：實(shí)現(xiàn)了大多數(shù)數(shù)據(jù)類型的拷貝，所有非引用類型及引用類型的String Number Boolean Function Array Date RegExp

缺點(diǎn)：未考慮一些特殊的引用類型如Error Math Symbol Map Set JSON，函數(shù)屬于引用拷貝，未解決循環(huán)引用的問題

Q：如何解決循環(huán)引用？

R：將父層級(jí)的數(shù)據(jù)緩存對(duì)比（可以順帶解決同層（非同層）同引用的問題）

const deepClone = (obj) => {
 // 非引用類型及函數(shù)將直接返回
 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結(jié)構(gòu)可以不必循環(huán)緩存，提高效率
 if (map.get(obj)) {
  return map.get(obj);
 }

 const result = obj instanceof Array ? [] : {};

 // 如果仔細(xì)觀察可以發(fā)現(xiàn)解決了同層同引用的問題
 map.set(obj, result);

 for (let propName in obj) {
  if (obj.hasOwnProperty(propName)) {
   result[propName] = deepClone(obj[propName]);
  }
 }

 return result;
}

Q：為什么函數(shù)還是指向原來的函數(shù)，而不創(chuàng)建新函數(shù)？

R：理論下函數(shù)也可以通過new Function(code)來創(chuàng)建新的函數(shù)，但是如果遇到閉包函數(shù)，我們無法得到原函數(shù)的外層定義的變量及其原有作用域鏈，這些在JS詞法解析時(shí)完成的步驟我們無法得知，所有只能引用原函數(shù)比較好。

Sum: 上面實(shí)現(xiàn)的缺點(diǎn)主要是沒有完全覆蓋特殊引用類型，但其實(shí)我們平時(shí)應(yīng)該不會(huì)遇到那些類型，所以可以湊合使用。如果還有其它的問題沒有考慮到或者有出錯(cuò)的，希望大家可以幫忙指出。

以上就是關(guān)于JS中如何實(shí)現(xiàn)深拷貝的內(nèi)容，如果你們有學(xué)習(xí)到知識(shí)或者技能，可以把它分享出去讓更多的人看到。