快捷導(dǎo)航

JS面試題中深拷貝的實現(xiàn)講解

更新時間：2020年05月07日 08:22:37 作者：沐曉

在本篇文章里小編給大家分享的是關(guān)于JS面試題中深拷貝的實現(xiàn)講解，需要的朋友們可以參考下。

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

Q：小朋友，你是否了解如何拷貝一個對象？

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

Object.assign({}, obj);

Q：那如何深拷貝一個對象呢？

R：機(jī)智的你

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

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

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

Q：那你能自己實現(xiàn)個深拷貝函數(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)點：實現(xiàn)了大多數(shù)數(shù)據(jù)類型的拷貝，所有非引用類型及引用類型的String Number Boolean Function Array Date RegExp

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

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

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

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ù)比較好。

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

以上就是JS面試題中深拷貝的實現(xiàn)講解的詳細(xì)內(nèi)容，更多關(guān)于JS深拷貝的實現(xiàn)的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: