JS: 深拷貝

摘要： 注意：以下深拷貝僅針對物件。 對於深拷貝，我平時用得很少，一般都是用 JSON 的方法來實現： let newObj = JSON.parse(JSON.stringify(oldObj)) 但前幾天踩了坑，在網上查了才發現問題，只能說坑只有踩過才知道深淺。 坑 ...

注意：以下深拷貝僅針對物件。

對於深拷貝，我平時用得很少，一般都是用 JSON 的方法來實現：

let newObj = JSON.parse(JSON.stringify(oldObj))

但前幾天踩了坑，在網上查了才發現問題，只能說坑只有踩過才知道深淺。

坑

1. 對於 function、undefined，會丟失這些屬性。

2. 對於 RegExp、Error 物件，只會得到空物件

3. 對於 date 物件，得到的結果是 string，而不是 date 物件

4. 對於 NaN、Infinity、-Infinity，會變成 null

   let oldObj = {
   test1: null,
   test2: undefined,
   fn: () => {console.log('fn')},
   date: new Date(),
   RegExp: /(a|b)/g,
   Error: new Error('err'),
   NaN: Number('NaN')
   }
   
   let newObj = JSON.parse(JSON.stringify(oldObj))
   
   // 丟失 function、undefined
   // Error、RegExp 為空物件
   // NaN 變為 null
   // date 物件變為 string
   newObj
   /*
   {
    Error: {}
    RegExp: {}
    date: "2019-04-16T11:43:05.870Z"
    NaN: null
    test1: null
   }
   */

5. 無法處理迴圈引用

   let oldObj = { }
   oldObj.obj = oldObj
   
   // 會報錯
   let newObj = JSON.parse(JSON.stringify(oldObj))
   // TypeError: Converting circular structure to JSON

淺拷貝

淺拷貝方法還是挺多的，列舉一二：

1. Object.assign()

   let oldObj = {
   name: 'parent',
   children: 'children'
   }
   
   let newObj = Object.assign({}, oldObj)

2. 迴圈

   /*
    * 淺拷貝，僅針對物件
    * params {object} obj
    */
   function shallowCopy (obj) {
   if (Object.prototype.toString.call(obj) !== '[object Object]') {
   throw new TypeError(`${obj} is not a object`)
   }
   
   let res = {}
   for (let key in obj) {
   if (obj.hasOwnProperty(key)) {
   res[key] = obj[key]
   }
   }
   
   return res
   }

深拷貝

深拷貝的實現也是可以使用for...in + 遞迴 實現的：

function isObject (obj) {
return Object.prototype.toString.call(obj) === '[object Object]'
}

/*
 * 深拷貝，僅針對物件
 * params {object} obj
 */
function deepCopy (obj) {
if (!isObject(obj)) {
throw new TypeError(`${obj} is not a object`)
}

let res = {}
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
res[key] = isObject(obj[key]) ? deepCopy(obj[key]) : obj[key]
}
}

return res
}

雖然解決了大部分JSON.parse(JSON.stringify(oldObj)) 的問題，但依然無法解決迴圈引用的問題。

let oldObj = {}
oldObj.obj = oldObj

let newObj = deepCopy(oldObj)

newObj.obj === oldObj.obj // true

解決迴圈引用

其實只要將已被拷貝的物件儲存下來，每次遞迴之前都檢查一遍該物件是否已經被拷貝，就可以解決迴圈引用的問題了。

/*
 * 深拷貝，僅針對物件
 * params {object} obj
 */
function deepCopy (obj, list = new WeakMap()) {
if (list.has(obj)) {
return list.get(obj)
}

if (!isObject(obj)) {
throw new TypeError(`${obj} is not a object`)
}

let res = {}
list.set(obj, res)
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
res[key] = isObject(obj[key]) ? deepCopy(obj[key], list) : obj[key]
}
}

return res
}

這樣迴圈引用的問題就解決啦，是不是很簡單。

let oldObj = {}
oldObj.obj = oldObj

let newObj = deepCopy(oldObj)

newObj.obj === oldObj.obj // false

當然，WeakMap 可能會存在相容性問題，所以可以將 list 改成陣列。