JavaScript中的深拷贝如何实现

functiondeepClone(target){
constmap=newWeakMap()

functionisObject(target){
return(typeoftarget==='object'&&target)||typeoftarget==='function'
}

functionclone(data){
if(!isObject(data)){
returndata
}
if([Date,RegExp].includes(data.constructor)){
returnnewdata.constructor(data)
}
if(typeofdata==='function'){
returnnewFunction('return'+data.toString())()
}
constexist=map.get(data)
if(exist){
returnexist
}
if(datainstanceofMap){
constresult=newMap()
map.set(data,result)
data.forEach((val,key)=>{
if(isObject(val)){
result.set(key,clone(val))
}else{
result.set(key,val)
}
})
returnresult
}
if(datainstanceofSet){
constresult=newSet()
map.set(data,result)
data.forEach(val=>{
if(isObject(val)){
result.add(clone(val))
}else{
result.add(val)
}
})
returnresult
}
constkeys=Reflect.ownKeys(data)
constallDesc=Object.getOwnPropertyDescriptors(data)
constresult=Object.create(Object.getPrototypeOf(data),allDesc)
map.set(data,result)
keys.forEach(key=>{
constval=data[key]
if(isObject(val)){
result[key]=clone(val)
}else{
result[key]=val
}
})
returnresult
}

returnclone(target)
}

//测试的obj对象
constobj=免费云主机、域名{
//===========1.基础数据类型===========
num:0,//number
str:'',//string
bool:true,//boolean
unf:undefined,//undefined
nul:null,//null
sym:Symbol('sym'),//symbol
bign:BigInt(1n),//bigint

//===========2.Object类型===========
//普通对象
obj:{
name:'我是一个对象',
id:1
},
//数组
arr:[0,1,2],
//函数
func:function(){
console.log('我是一个函数')
},
//日期
date:newDate(0),
//正则
reg:newRegExp('/我是一个正则/ig'),
//Map
map:newMap().set('mapKey',1),
//Set
set:newSet().add('set'),
//===========3.其他===========
[Symbol('1')]:1//Symbol作为key
};

//4.添加不可枚举属性
Object.defineProperty(obj,'innumerable',{
enumerable:false,
value:'不可枚举属性'
});

//5.设置原型对象
Object.setPrototypeOf(obj,{
proto:'proto'
})

//6.设置loop成循环引用的属性
obj.loop=obj

functionshallowClone(target){
if(typeoftarget==='object'&&target!==null){
constcloneTarget=Array.isArray(target)?[]:{};
for(letpropintarget){
if(target.hasOwnProperty(prop)){
cloneTarget[prop]=target[prop];
}
}
returncloneTarget;
}else{
returntarget;
}
}


//测试
constshallowCloneObj=shallowClone(obj)

shallowCloneObj===obj//false，返回的是一个新对象
shallowCloneObj.arr===obj.arr//true，对于对象类型只拷贝了引用

functiondeepClone(target){
if(typeoftarget==='object'&&target!==null){
returnJSON.parse(JSON.stringify(target));
}else{
returntarget;
}
}

//开头的测试obj存在BigInt类型、循环引用，JSON.stringfy()执行会报错，所以除去这两个条件进行测试
constclonedObj=deepClone(obj)

//测试
clonedObj===obj//false，返回的是一个新对象
clonedObj.arr===obj.arr//false，说明拷贝的不是引用

functiondeepClone(target){
if(typeoftarget==='object'&&target){
letcloneObj={}
for(constkeyintarget){//遍历
constval=target[key]
if(typeofval==='object'&&val){
cloneObj[key]=deepClone(val)//是对象就再次调用该函数递归
}else{
cloneObj[key]=val//基本类型的话直接复制值
}
}
returncloneObj
}else{
returntarget;
}
}

//开头的测试obj存在循环引用，除去这个条件进行测试
constclonedObj=deepClone(obj)

//测试
clonedObj===obj//false，返回的是一个新对象
clonedObj.arr===obj.arr//false，说明拷贝的不是引用

consta={}
constb={}
a.b=b
b.a=a
deepClone(a)

functiondeepClone(target){
//WeakMap作为记录对象Hash表（用于防止循环引用）
constmap=newWeakMap()

//判断是否为object类型的辅助函数，减少重复代码
functionisObject(target){
return(typeoftarget==='object'&&target)||typeoftarget==='function'
}

functionclone(data){

//基础类型直接返回值
if(!isObject(data)){
returndata
}

//日期或者正则对象则直接构造一个新的对象返回
if([Date,RegExp].includes(data.constructor)){
returnnewdata.constructor(data)
}

//处理函数对象
if(typeofdata==='function'){
returnnewFunction('return'+data.toString())()
}

//如果该对象已存在，则直接返回该对象
constexist=map.get(data)
if(exist){
returnexist
}

//处理Map对象
if(datainstanceofMap){
constresult=newMap()
map.set(data,result)
data.forEach((val,key)=>{
//注意：map中的值为object的话也得深拷贝
if(isObject(val)){
result.set(key,clone(val))
}else{
result.set(key,val)
}
})
returnresult
}

//处理Set对象
if(datainstanceofSet){
constresult=newSet()
map.set(data,result)
data.forEach(val=>{
//注意：set中的值为object的话也得深拷贝
if(isObject(val)){
result.add(clone(val))
}else{
result.add(val)
}
})
returnresult
}

//收集键名（考虑了以Symbol作为key以及不可枚举的属性）
constkeys=Reflect.ownKeys(data)
//利用Object的getOwnPropertyDescriptors方法可以获得对象的所有属性以及对应的属性描述
constallDesc=Object.getOwnPropertyDescriptors(data)
//结合Object的create方法创建一个新对象，并继承传入原对象的原型链，这里得到的result是对data的浅拷贝
constresult=Object.create(Object.getPrototypeOf(data),allDesc)

//新对象加入到map中，进行记录
map.set(data,result)

//Object.create()是浅拷贝，所以要判断并递归执行深拷贝
keys.forEach(key=>{
constval=data[key]
if(isObject(val)){
//属性值为对象类型或函数对象的话也需要进行深拷贝
result[key]=clone(val)
}else{
result[key]=val
}
})
returnresult
}

returnclone(target)
}



//测试
constclonedObj=deepClone(obj)
clonedObj===obj//false，返回的是一个新对象
clonedObj.arr===obj.arr//false，说明拷贝的不是引用
clonedObj.func===obj.func//false，说明function也复制了一份
clonedObj.proto//proto，可以取到原型的属性