JS中实现浅拷贝与深拷贝的几种方式

只拷贝第一层的值，其他后面拷贝的是地址，拷贝后的对象与原对象不是同一个地址，拷贝时会开一个内存给拷贝的对象

第一层进行值拷贝，第二层及之后进行地址拷贝

示例：快捷方式

利用assign实现

let obj = {
	user:{
		name:"rosy"
	}
}
//assign 实现浅拷贝
let copy = Object.assign({},obj);
copy.user.name = "lucy";
console.log(obj.user.name);//lucy
console.log(obj == copy);//false

利用数组方法实现 concat slice 以及 ... 扩展运算符

//数组相关方法实现浅拷贝

//利用concat 连接
let arr = [{say:"hello"}]
//不连接任何数组，相当于返回原数组
let copyArr = arr.concat();
console.log(copyArr[0] == arr[0]);//true
console.log(copyArr == arr);//false

//利用slice 截取
let sliceArr = arr.slice();
console.log(sliceArr[0] == arr[0]);//true
console.log(sliceArr == arr);//false

//开辟一个新变量
let newArr = [...arr];
console.log(newArr[0] == arr[0]);//true
console.log(newArr == arr);//false

//修改
newArr[0].say = "hi";
console.log(arr); //say:"hi"
delete newArr[0]["say"];
console.log(arr); //空
newArr[1] = "lucy";
console.log(arr); //没有lucy

深拷贝

每层都进行值拷贝

示例：拷贝文件，将文件完全拷贝到U盘，对U盘里的文件进行修改，并不影响原文件，地址不同，除了内容相同，完全不想关的东西

利用序列化与反序列化实现 JSON.parse JSON.stringify

let obj = {
	user:[{
		name:"lucy"
	}]
}

//深拷贝 字符串转换
let copy = JSON.parse(JSON.stringify(obj));
console.log(copy == obj); //false
console.log(copy.user == obj.user); //false
console.log(copy.user[0] == obj.user[0]); //false
console.log(copy.user[0]["name"] == obj.user[0]["name"]); //true

利用递归实现(面试题)

思路：

• 根据传入的对象，进行判断，如果不是对象则直接赋值
• 如果是对象则先创建一个空对象，判断是对象还是数组，是数组创建[],对象则创建{}
• 如果是数组或对象，则取出里面的值继续进行递归赋值

//递归实现深拷贝
function cloneDeep(target){
	//如果传入的是空，则直接返回
	if(!target) return {}
	//定义一个对象接拷贝的数据
	let copy;
	//根据typeof判断是否为对象
	if(typeof target == "object"){
		copy = target instanceof Array ? [] : {};

		//遍历里面的数据进行拷贝
		for(let key in target){
			copy[key] = cloneDeep(target[key]);
		}
	}
	else{
		//如果是值，则直接赋值
		copy = target;
	}
	return copy;
}

let obj2 = {
	person:[{
		name:"lucy",
		age:18
	}]
}

let obj3 = cloneDeep(obj2);
console.log(obj2 == obj3); //false
console.log(obj2.person == obj3.person); //false
console.log(obj2.person[0] == obj3.person[0]); //false
console.log(obj2.person[0]["name"] == obj3.person[0]["name"]); //true