JS: 深拷貝
注意:以下深拷貝僅針對物件。
對於深拷貝,我平時用得很少,一般都是用 JSON 的方法來實現:
let newObj = JSON.parse(JSON.stringify(oldObj))
但前幾天踩了坑,在網上查了才發現問題,只能說坑只有踩過才知道深淺。
坑
-
對於 function、undefined,會丟失這些屬性。
-
對於 RegExp、Error 物件,只會得到空物件
-
對於 date 物件,得到的結果是 string,而不是 date 物件
-
對於 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 } */
-
無法處理迴圈引用
let oldObj = { } oldObj.obj = oldObj // 會報錯 let newObj = JSON.parse(JSON.stringify(oldObj)) // TypeError: Converting circular structure to JSON
淺拷貝
淺拷貝方法還是挺多的,列舉一二:
-
Object.assign()
let oldObj = { name: 'parent', children: 'children' } let newObj = Object.assign({}, oldObj)
-
迴圈
/* * 淺拷貝,僅針對物件 * 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 改成陣列。