面試之JS深拷貝的實現

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

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

R：此時，機智的你可能會想到

Object.assign({}, obj);

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

R：機智的你

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

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

1. 性能問題，stringify再解析其實須要耗費較多時間，特別是數據量大的時候。

2. 一些類型沒法拷貝，例如函數(不輸出)，正則(輸出空對象)，時間對象(輸出時間字符串)，Undefiend(不輸出)

3. 遇到循環引用的對象會出錯

4. 同層（非同層）同引用的問題，理論下兩個key對應的val若是指向同一個對象，拷貝也應該指向一個相同新地址纔對

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: 上面實現的缺點主要是沒有徹底覆蓋特殊引用類型，但其實咱們平時應該不會遇到那些類型，因此能夠湊合使用。若是還有其它的問題沒有考慮到或者有出錯的，但願你們能夠幫忙指出。

參考

• 如何寫出一個驚豔面試官的深拷貝?

---

歡迎到前端學習打卡羣一塊兒學習～516913974