精學手撕系列——深淺拷貝原理

作者：時光屋小豪 2020-09-17 14:04:32

本文是作者在準備面試時，精心準備的深淺拷貝—精講系列文章，希望可以幫助到大家

一.JS中淺拷貝的手段有哪些？

1.什么是拷貝？
我們來看下面一個例子，幫助大家區分賦值與拷貝的區別：

let arr = [1, 2, 3]; 
let newArr = arr; 
newArr[0] = 100; 
 
console.log(arr); // [100, 2, 3]

這是直接賦值的情況，不涉及任何拷貝。當改變newArr的時候，由于是同一個引用，arr指向的值也跟著改變。

現在進行淺拷貝：

let arr = [1, 2, 3]; 
let newArr = arr.slice(); 
newArr[0] = 100; 
 
console.log(arr); //[1, 2, 3]

當我們修改newArr的時候，arr的值并不改變，這是因為newArr是arr淺拷貝后的結果，newArr和arr現在是兩個不同的引用地址了。

但我們再來看一個潛在的問題：

let arr = [1, 2, {val: 4}]; 
let newArr = arr.slice(); 
newArr[2].val = 1000; 
 
console.log(arr);//[ 1, 2, { val: 1000 } ]

這里我們明顯看到，淺拷貝雖然只能復制一層內容。但如果復制的第一層內容中，有復雜數據類型(數組/對象)，那么淺拷貝將失效，這也是淺拷貝最大的限制所在了。

但幸運的是，深拷貝就是為了解決這個問題而生的，它能解決無限層級的對象嵌套問題，實現徹底的拷貝。深拷貝我們在下一道題中介紹。

接下來，我們來歸納一下JS中實現的淺拷貝都有哪些方法呢？

2.手動實現

const shallClone = (target) => { 
  if (typeof target === 'object' && target !== null) { 
    const cloneTarget = Array.isArray(target) ? [] : {}; 
    for (let prop in target) { 
      if (target.hasOwnProperty(prop)) { // 遍歷對象自身可枚舉屬性（不考慮繼承屬性和原型對象） 
        cloneTarget[prop] = target[prop]; 
    } 
    return cloneTarget; 
  } else { 
    return target; 
  } 
}

3.Object.assign
但是需要注意的是，Object.assgin() 拷貝的是對象的屬性的引用，而不是對象本身。

let obj = { name: 'sy', age: 18 }; 
const obj2 = Object.assign({}, obj, {Newname: 'sss'}); 
console.log(obj2);  // {name: "sy", age: 18, Newname: "sss"}

4.concat()淺拷貝數組

let arr = [1, 2, 3]; 
let newArr = arr.concat(); 
newArr[1] = 100; 
console.log(arr); //[ 1, 2, 3 ]

5.slice()淺拷貝
開頭例子就是！！

6. ...展開運算符

let arr = [1, 2, 3]; 
let newArr = [...arr]; //跟arr.slice()是一樣的效果

二.JS中深拷貝的手段有哪些？
在實現一個完整版的深拷貝函數之前，看看有沒有某個api能幫助我們完成深拷貝？

1.api版-簡易版

JSON.parse(JSON.stringify());

從下面例子中，我們可以看出簡易版的深拷貝，已經做到了。

let arr = [10, [100, 200], { x: 10, y:20}]; 
let newArr = JSON.parse(JSON.stringify(arr));  
console.log(newArr[2] === arr[2]; //  false

其實，上面的api，它所使用的是暴力法，什么是暴力法呢，在這里給大家解釋一下：

暴力法：把原始數據直接變為字符串，再把字符串變為對象，（此時瀏覽器會重新開辟所有的內存空間），實現深拷貝。

但是直接供我們使用的api，往往會有一些自己的弊端，比如我們看下面這個例子

let obj = { 
  a: 100, 
  b: [10, 20, 30], 
  c: { 
    x: 10 
  }, 
  d: /^\d+$/， 
   // d: function() {} 
  // d: new Date() 
  // d: BigInt('10') 
  // d: Symbol('f') 
}; 
 
let newObj = JSON.parse(JSON.stringify(obj)); 
console.log(newObj); 
/* 
  {a: 100, b: Array(3), c: {…}, d: {…}} 
    a: 100 
    b: (3) [10, 20, 30] 
    c: {x: 10} 
    d: {} 
    __proto__: Object 
  } 
*/

從上面例子的輸出結果中，我們可以看出，正則屬性直接變成了空對象。

那假如我們再把最后一個屬性，換成其它類型試一試，我們同理也可以發現，JSON.parse(JSON.stringify()) 都是有弊端的。我們總結一下：

正則屬性會變為空對象
函數會直接消失
日期直接字符串
Symbol直接消失
BigInt('10')，直接報錯
undefined會直接消失
所以當對象中沒有以上形式的屬性時，可以用JSON.parse(JSON.stringify())。

但是此方法還有一個弊端，那就是循環引用問題，舉個例子：

const a = {value: 2}, 
a.target = a;

拷貝a會出現系統棧溢出，因為出現了無限遞歸的情況。

2.實現簡易版深拷貝
發現上面弊端后，我們來手寫一版深拷貝

此種方法，不考慮循環引用問題，也不考慮特殊對象的問題

function deepClone(target)  { 
  if (target === null) return null; 
  if (typeof target !== 'object') return target; 
 
  const cloneTarget = Array.isArray(target) ? [] : {}; 
  for (let prop in target) { 
    if (target.hasOwnProperty(prop)) { 
      cloneTarget[prop] = deepClone(target[prop]); 
    } 
  } 
  return cloneTarget; 
}

現在我們以發現的幾個問題為導向，依次完善深拷貝函數

3.解決循環引用
問題如下：

let obj = { value: 100 }; 
obj.target = obj; 
 
deepClone(obj); //報錯: RangeError: Maximum call stack size exceeded

這就是循環引用。我們怎么來解決這個問題呢？

創建一個Map（Map類似于對象，也是鍵值對的集合，但是“鍵”可以是對象），記錄下已經拷貝過的對象，如果已經拷貝過，那直接返回就行了.

其原理是每次拷貝引用類型的時候，都設置一個true作為標記，等下次再遍歷該對象的時候，就知道它是否已經拷貝過。

const isObject = (target) => (typeof target === 'object' || typeof target === 'function') && target !== null; 
 
function deepClone (target, map = new Map()) { 
  // 先判斷該引用類型是否被 拷貝過 
  if (map.get(target)) { 
    return target; 
  } 
 
  if (isObject(target)) { 
    map.set(target, true); 
    const cloneTarget = Array.isArray(target) ? [] : {}; 
    for (let prop in target) { 
      if (target.hasOwnProperty(props)) { 
        cloneTarget[prop] = deepClone(target[props], map); 
      } 
    } 
    return cloneTarget; 
  } else { 
    return target; 
  } 
}

現在我們就可以到已經成功了：

const a = {val:2}; 
a.target = a; 
let newA = deepClone(a); 
console.log(newA)//{ val: 2, target: { val: 2, target: [Circular] } }

好像是沒有問題了, 拷貝也完成了。但還是有一個潛在的坑, 就是map 上的 key 和 map 構成了強引用關系，這是相當危險的。我給你解釋一下與之相對的弱引用的概念你就明白了：

在計算機程序設計中，弱引用與強引用相對，是指不能確保其引用的對象不會被垃圾回收器回收的引用。一個對象若只被弱引用所引用，則被認為是不可訪問（或弱可訪問）的，并因此可能在任何時刻被回收。--百度百科

說的有一點繞，我用大白話解釋一下，被弱引用的對象可以在任何時候被回收，而對于強引用來說，只要這個強引用還在，那么對象無法被回收。拿上面的例子說，map 和 a一直是強引用的關系，在程序結束之前，a所占的內存空間一直不會被釋放，便會造成嚴重的內存泄漏問題。

怎么解決這個問題呢？

很簡單，讓 map 的 key 和 map 構成弱引用即可。ES6給我們提供了這樣的數據結構，它的名字叫WeakMap，它是一種特殊的Map, 其中的鍵是弱引用的。其鍵必須是對象，而值可以是任意的。

稍微改造一下極課：

const deepClone = (target, map = new WeakMap()) => { 
  //... 
}

4.解決特殊對象問題(RegExp,Date...)
如果傳入的對象格式滿足，正則或日期格式的話，返回一個新的正則或日期對象的實例

function deepClone (target, map = new Map()) { 
  
  // 檢測當前對象target是否與 正則、日期格式對象匹配 
  if (/^(RegExp|Date)$/i.test(target.constructor.name)){ 
    new constructor(target); 
  } 
}

5.完整版深克隆實現源碼

const isObject = (target) => (typeof target === 'object' || typeof target === 'function') && target !== null; 
 
function deepClone (target, map = new Map()) { 
  // 先判斷該引用類型是否被 拷貝過 
  if (map.get(target)) { 
    return target; 
  } 
 
  // 檢測當前對象target是否與 正則、日期格式對象匹配 
  if (/^(RegExp|Date)$/i.test(target.constructor.name)){ 
    new constructor(target); 
  } 
 
  if (isObject(target)) { 
    map.set(target, true); 
    const cloneTarget = Array.isArray(target) ? [] : {}; 
    for (let prop in target) { 
      if (target.hasOwnProperty(props)) { 
        cloneTarget[prop] = deepClone(target[props], map); 
      } 
    } 
    return cloneTarget; 
  } else { 
    return target; 
  } 
}

補充：Object.keys(obj)只遍歷私有屬性（原型上可能有公共的方法，無法遍歷）

責任編輯：姜華來源：前端時光屋

拷貝