web前端高级JavaScript - 数组和对象的浅克隆与深克隆

浅克隆

浅克隆是指：只克隆数组/对象的第一层级内容（开辟新的堆内存），而第二层级及以上层级的内容则直接引用（使用原来第二层级及以上层级的堆内存）。如果对克隆后对象的二级或以上层级进行修改，那么克隆前对象的二级或以上层级也会跟着被修改。
例如：现有一个对象obj1对应堆内存地址0x000，obj1对象中还有个子对象obj1_1对应堆内存0x001，现在想对obj1对象进行浅克隆，则会创建一个新的对象obj2对应新的堆内存地址0x002，对于对象obj1中的基本类型数据则会直接拷贝到obj2中，而obj1中的引用类型也就是子对象obj1_1则会直接被新对象obj2引用，而不是创建新的堆内存。后面如果通过操作obj2对obj2中的子对象obj1_1进行更改，那么obj1中的obj1_1也会随着变化，因为它们用的是同一个堆内存。来看下面的图会更直观一些

实现浅克隆的几种方案

• 对象的浅克隆方案一：基于循环实现

let obj1 = {
   
	python: "python",
	java: "java"
	fontend: {
   
		javascript: "javascript",
		html: "html"
	}
}
let obj2 = {
   };//创建一个新对象（开辟新的堆内存）
//把obj1中私有的key和Symbol类型的key存在数组中
let keys = [
	...Object.keys(obj1),//展开运算符
	...Object.getOwnPropertySymbols(obj1)
]
keys.forEach(key => {
   
	obj2[key] = obj1[key];
});
console.log(obj1 === obj2); //false
console.log(obj1.fontend === obj2.fontend);// true

• 对象的浅克隆方案二： 展开运算符

let obj1 = {
   
	python: "python",
	java: "java"
	fontend: {
   
		javascript: "javascript",
		html: "html"
	}
}
let obj2 = {
   
	...obj1
};
console.log(obj1 === obj2); //false
console.log(obj1.fontend === obj2.fontend);// true

• 对象的浅克隆方案三：基于Object.assign()函数

Object.assign([obj1], …[obj2])：该方法接收多个参数，执行后会将obj2中的键值对合并到obj1中，并将obj1的堆内存地址返回。注意：这里返回的不是新的对象，而是把第一个参数作为返回值返回。
所以我们可以利用这个特点进行对象的浅克隆

let obj1 = {
   
	python: "python",
	java: "java"
	fontend: {
   
		javascript