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

[[342550]]

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

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

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

現(xiàn)在進行淺拷貝：

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

當(dāng)我們修改newArr的時候，arr的值并不改變，這是因為newArr是arr淺拷貝后的結(jié)果，newArr和arr現(xiàn)在是兩個不同的引用地址了。

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

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

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

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

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

2.手動實現(xiàn)

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()淺拷貝數(shù)組

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中深拷貝的手段有哪些？
在實現(xiàn)一個完整版的深拷貝函數(shù)之前，看看有沒有某個api能幫助我們完成深拷貝？

1.api版-簡易版

JSON.parse(JSON.stringify()); 

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

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

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

暴力法：把原始數(shù)據(jù)直接變?yōu)樽址侔炎址優(yōu)閷ο螅ù藭r瀏覽器會重新開辟所有的內(nèi)存空間），實現(xiàn)深拷貝。

但是直接供我們使用的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 
  } 
*/ 

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

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

正則屬性會變?yōu)榭諏ο?br /> 函數(shù)會直接消失
日期直接字符串
Symbol直接消失
BigInt('10')，直接報錯
undefined會直接消失
所以當(dāng)對象中沒有以上形式的屬性時，可以用JSON.parse(JSON.stringify())。

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

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

拷貝a會出現(xiàn)系統(tǒng)棧溢出，因為出現(xiàn)了無限遞歸的情況。

2.實現(xiàn)簡易版深拷貝
發(fā)現(xiàn)上面弊端后，我們來手寫一版深拷貝

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

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; 
} 

現(xiàn)在我們以發(fā)現(xiàn)的幾個問題為導(dǎo)向，依次完善深拷貝函數(shù)

3.解決循環(huán)引用
問題如下：

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

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

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

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

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; 
  } 
} 

現(xiàn)在我們就可以到已經(jīng)成功了：

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

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

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

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

怎么解決這個問題呢？

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

稍微改造一下極課：

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

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

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

5.完整版深克隆實現(xiàn)源碼

const isObject = (target) => (typeof target === 'object' || typeof target === 'function') && target !== null; 
 
function deepClone (target, map = new Map()) { 
  // 先判斷該引用類型是否被 拷貝過 
  if (map.get(target)) { 
    return target; 
  } 
 
  // 檢測當(dāng)前對象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)只遍歷私有屬性（原型上可能有公共的方法，無法遍歷）