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 改成数组。