JS浅拷贝深拷贝——赋值VS浅拷贝深拷贝

什么是深/浅拷贝，他们跟赋值有何区别？

浅拷贝： 浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。
如果对象的属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址。所以如果其中一个对象改变了这个地址，就会影响到另一个对象。
深拷贝： 深拷贝是将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟一个新的区域存放对象，且修改新对象不会影响原对象。

赋值和深/浅拷贝的区别

这三者的区别如下，不过比较的前提都是针对引用类型：

• 赋值： 当我们把一个对象赋值给一个新的变量时，**赋的其实是该对象的在栈中的地址，而不是堆中的数据。**也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。
• 浅拷贝： 重新在堆中创建内存，拷贝前后对象的基本数据类型互不影响，但拷贝前后对象的引用类型因共享同一块内存，会相互影响。
• 深拷贝： 从堆内存中开辟一个新的区域存放新对象，对对象中的子对象进行递归拷贝，拷贝前后的两个对象互不影响。

举个栗子🌰:

//对象赋值
let obj1 = {
    name : '星星',
    arr : [1,[2,3],4],
    major:{
		one:'前端',
		two:'后端'
	}
};
let obj2 = obj1;
obj2.name = "宇宙";
obj2.arr[1] =[5,6,7] ;
obj2.major.one = '全栈';
console.log('obj1',obj1) // obj1 { name: '宇宙', arr: [ 1, [ 5, 6, 7 ], 4 ],major: {one: '全栈', two: '后端'}}
console.log('obj2',obj2) // obj2 { name: '宇宙', arr: [ 1, [ 5, 6, 7 ], 4 ],major: {one: '全栈', two: '后端'}}

//浅拷贝
let obj1 = {
    name : '星星',
    arr : [1,[2,3],4],
    major:{
		one:'前端',
		two:'后端'
	}
};
function clone(target) {
    let cloneTarget = {};
    for (const key in target) {
        cloneTarget[key] = target[key];
    }
    console.log(cloneTarget === target,"cloneTarget")
    return cloneTarget;
}
let obj3 = clone(obj1);
obj3.name = "宇宙";
obj3.arr[1] =[5,6,7] ;
obj3.major.one = '全栈';
console.log('obj1',obj1) // obj1 { name: '星星', arr: [ 1, [ 5, 6, 7 ], 4 ] ,,major: {one: '全栈', two: '后端'}}
console.log('obj3',obj3) // obj3 { name: '宇宙', arr: [ 1, [ 5, 6, 7 ], 4 ] ,,major: {one: '全栈', two: '后端'}}

实现一个深拷贝

简单版

function clone(target){
	if(typeof target === 'object'){
		let cloneTarget = {};
		for(const key in target){
			cloneTarget[key] = clone(target[key]);
		}
		return cloneTarget;
	}else{
		return target;
	}
}

这是一个最基础版本的深拷贝，这段代码可以让你向面试官展示你可以用递归解决问题，但是这个方法还有很多缺陷，比如没有考虑对象或对象属性为数组的情况。

考虑数组

function clone(target){
	if(typeof target === 'object'){
		let cloneTarget = Array.isArray(target) ? [] : {};
		for(const key in target){
			cloneTarget[key] = clone(target[key]);
		}
		return cloneTarget;
	}else{
		return target;
	}
}

OK 我们继续研究

循环引用

我们执行下面这样一个测试用例：

const target = {
    field1: 1,
    field2: undefined,
    field3: {
        child: 'child'
    },
    field4: [2, 4, 8]
};
target.target = target;
function clone(target){
	if(typeof target === 'object'){
		let cloneTarget = Array.isArray(target) ? [] : {};
		for(const key in target){
			cloneTarget[key] = clone(target[key]);
		}
		return cloneTarget;
	}else{
		return target;
	}
}
clone(target)

可以看到下面的结果：

可以看到递归进入死循环导致栈内存溢出了。
原因就是上面的对象存在循环引用的情况，即对象的属性间接或直接的引用了自身的情况：
解决循环引用问题，我们可以额外开辟一个存储空间，来存储当前对象和拷贝对象的对应关系，
当需要拷贝当前对象时，先去存储空间中找，有没有拷贝过这个对象，如果有的话直接返回，如果没有的话继续拷贝， 这样就巧妙化解了循环引用的问题。
这个存储空间，需要可以存储key-value形式的数据，且key可以是一个引用类型，我们可以选择Map这种数据结构：

• 检查map中有误克隆过的对象
• 有的话直接返回
• 没有 将当前对象作为key,克隆对象作为value进行存储
• 继续克隆

function clone(target,map = new Map()){
	if(typeof target === 'object'){
		let cloneTarget = Array.isArray(target) ? [] : {};
		if(map.get(target)){
			return map.get(target);
		}
		map.set(target,cloneTarget);
		for(const key in target){
			cloneTarget[key] = clone(target[key],map);
		}
		return cloneTarget;
	}else{
		return target;
	}
}

可以看到，执行没有报错，结果：

接下来，我们可以使用，WeakMap替代Map来使代码达到画龙点睛的作用：

function clone(target, map = new WeakMap()) {
    // ...
};

为什么使用WeakMap？

WeakMap 对象是一组键值对的集合，其中的键是弱引用的。其键必须是对象，而值可以是任意的。

什么是弱引用呢？

在计算机程序设计中，弱引用与强引用相对，是指不能确保其引用的对象不会被垃圾回收器回收的引用。 一个对象若只被弱引用所引用，则被认为是不可访问（或弱可访问）的，并因此可能在任何时刻被回收。

我们默认创建一个对象：const obj = { } ，就默认创建了一个强引用的对象，我们只有手动将obj = null,它才会被垃圾回收机制进行回收，如果是弱引用对象，垃圾回收机制会自动帮我们回收。
举个栗子🌰:
如果我们使用Map的话，那么对象间是存在强引用关系的：

let obj = { name : 'ConardLi'}
const target = new Map();
target.set(obj,'code秘密花园');
obj = null;

虽然我们手动将obj，进行释放，然是target依然对obj存在强引用关系，所以这部分内存依然无法被释放。
再来看WeakMap：

let obj = { name : 'ConardLi'}
const target = new WeakMap();
target.set(obj,'code秘密花园');
obj = null;

如果是WeakMap的话，target和obj存在的就是弱引用关系，当下一次垃圾回收机制执行时，这块内存就会被释放掉。
设想一下，如果我们要拷贝的对象非常庞大时，使用Map会对内存造成非常大的额外消耗，而且我们需要手动清除Map的属性才能释放这块内存，而WeakMap会帮我们巧妙化解这个问题。

我也经常在某些代码中看到有人使用WeakMap来解决循环引用问题，但是解释都是模棱两可的，当你不太了解WeakMap的真正作用时。我建议你也不要在面试中写这样的代码，结果只能是给自己挖坑，即使是准备面试，你写的每一行代码也都是需要经过深思熟虑并且非常明白的。
能考虑到循环引用的问题，你已经向面试官展示了你考虑问题的全面性，如果还能用WeakMap解决问题，并很明确的向面试官解释这样做的目的，那么你的代码在面试官眼里应该算是合格了。

考虑其他类型

//深拷贝
let obj1 = {
    name : '星星',
    arr : [1,[2,3],4],
};
let obj4 = deepClone(obj1);
obj4.name = '宇宙';
obj4.arr[1] = [5,6,7]
obj4.major.one = '全栈';
//深拷贝方法
function deepClone(target,map = new WeakMap()){
	if(target === null) return target ; // 如果是null或者undefined我就不进行拷贝操作
	if(target instanceof Date) return new Date(target );
	if(target instanceof RegExp) return new RegExp(target );
	// 可能是对象或者普通的值  如果是函数的话是不需要深拷贝
	if(typeof target !== "object") return target ;
	let cloneTarget = Array.isArray(target) ? [] : {};
	if(map.get(target)){
		return map.get(target);
	}
	map.set(target,cloneTarget);
	for(const key in target){
		// 实现一个递归拷贝
		cloneTarget[key] = deepClone(target[key],map);
	}
	return cloneTarget;
}

参考文章：https://juejin.cn/post/6844903929705136141#heading-1