js的深克隆与浅克隆

浅克隆

var o={
		a:1,
		}
var cloneObj=o;
cloneObj.a=2;
console.log(o.a);//2

浅克隆其实就是将o的地址复制一份给cloneObj，也就是克隆后的对象与原对象指向同一个地址，所以克隆后的对象与原对象操作的是同一块堆内存的内容

深克隆

var o={
		a:1
	  }
var cloneObj=JSON.parse(JSON.stringify(o));
cloneObj.a=2;
console.log(o.a);//1

深克隆就是在堆中新开辟一块内存指向cloneObj，然后将o内的内容复制一份到cloneObj指向的内存中，克隆后的对象与原对象为两个不同没有联系的对象
一般在项目中都会使用JSON.parse(JSON.stringify(obj))来实现深克隆，深克隆也是为了防止我们直接操作原对象造成不可恢复性操作

手写实现深、浅克隆

浅克隆

function shallowClone(obj){
	if(!obj||type of (obj)!='object'){
		throw new Error('error')
	}
	var target=obj.constructor===Array?[]:{};
	for(var key in obj){
		if(obj.hasOwnProperty(key)){//判断对象是否包含这个属性
			target[key]=obj[key]
		}
	}
	return target;
}

浅克隆

function deepClone(obj){
	if(!obj||type of (obj)!='object'){
		throw new Error('error')
	}
	var target=obj.constructor===Array?[]:{};
	for(var key in obj){
		if(obj.hasOwnProperty(key)){//判断对象是否包含这个属性
			if(obj[key]&&type of obj[key]==='object'){//如果属性是个对象则再次遍历
				target[key]=obj[key].constructor===Array?[]:{}
				target[key]=deepClone(obj[key])
			}else{
				target[key]=obj[key]
			}
		}
	}
	return target;
}

JSON.stringify（obj）的弊端

如果对象的属性是函数、日期、正则表达式和Symbol类型的数据会在转换的时候出现问题（不能转换属性不可遍历的对象）

函数、Symbol、undefined 转换后都是undefined
正则表达式转换后为{}
日期转换后的格式会不正确，如下
不支持循环引用

structuredClone

结构化克隆算法参考mdn的structuredClone
大部分浏览器都已经支持，相比Json克隆，这个算法支持循环引用，不会过滤undefined数据。
但是遇到函数类型属性会直接报错