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

[[342550]]

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

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

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

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

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

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

但我們?cè)賮砜匆粋€(gè)潛在的問題：

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ù)組/對(duì)象)，那么淺拷貝將失效，這也是淺拷貝最大的限制所在了。

但幸運(yùn)的是，深拷貝就是為了解決這個(gè)問題而生的，它能解決無限層級(jí)的對(duì)象嵌套問題，實(shí)現(xiàn)徹底的拷貝。深拷貝我們?cè)谙乱坏李}中介紹。

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

2.手動(dòng)實(shí)現(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)) { // 遍歷對(duì)象自身可枚舉屬性（不考慮繼承屬性和原型對(duì)象） 
        cloneTarget[prop] = target[prop]; 
    } 
    return cloneTarget; 
  } else { 
    return target; 
  } 
} 

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

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. ...展開運(yùn)算符

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

二.JS中深拷貝的手段有哪些？
在實(shí)現(xiàn)一個(gè)完整版的深拷貝函數(shù)之前，看看有沒有某個(gè)api能幫助我們完成深拷貝？

1.api版-簡(jiǎn)易版

JSON.parse(JSON.stringify()); 

從下面例子中，我們可以看出簡(jiǎn)易版的深拷貝，已經(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 

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

暴力法：把原始數(shù)據(jù)直接變?yōu)樽址?，再把字符串變?yōu)閷?duì)象，（此時(shí)瀏覽器會(huì)重新開辟所有的內(nèi)存空間），實(shí)現(xiàn)深拷貝。

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

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é)果中，我們可以看出，正則屬性直接變成了空對(duì)象。

那假如我們?cè)侔炎詈笠粋€(gè)屬性，換成其它類型試一試，我們同理也可以發(fā)現(xiàn)，JSON.parse(JSON.stringify()) 都是有弊端的。我們總結(jié)一下：

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

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

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

拷貝a會(huì)出現(xiàn)系統(tǒng)棧溢出，因?yàn)槌霈F(xiàn)了無限遞歸的情況。

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

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

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)的幾個(gè)問題為導(dǎo)向，依次完善深拷貝函數(shù)

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

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

這就是循環(huán)引用。我們?cè)趺磥斫鉀Q這個(gè)問題呢？

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

其原理是每次拷貝引用類型的時(shí)候，都設(shè)置一個(gè)true作為標(biāo)記，等下次再遍歷該對(duì)象的時(shí)候，就知道它是否已經(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] } } 

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

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

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

怎么解決這個(gè)問題呢？

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

稍微改造一下極課：

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

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

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

5.完整版深克隆實(shí)現(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; 
  } 
 
  // 檢測(cè)當(dāng)前對(duì)象target是否與 正則、日期格式對(duì)象匹配 
  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; 
  } 
} 

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