对象的深浅拷贝

一、定义

浅拷贝：创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址，所以其中一个对象改变了这个地址，就会影响到另一个对象。

深拷贝：将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟一个新的区域存放新对象，两者修改不会相互影响。

二、浅拷贝

1、常用方法

function clone(target) {
	let cloneTarget = {};
	for (let key in target) {
		cloneTarget[key] = target[key];
	}
	return cloneTarget;
}

2、ES6新特性

Object.assign({}, target);

有人说Object.assign()是深拷贝，其实不是，它只有第一层是深拷贝，上面的常用方法也是如此。

三、深拷贝

1、乞丐版

JSON.parse(JSON.stringify(obj));

这种写法简单粗暴，而且适用于大部分场景。但是也有很大缺陷，主要体现在拷贝其他引用类型、函数、循环引用等情况，而且性能也不太友好，应避免大面积使用。

2、递归实现简单的深拷贝

function deepClone(target) {
	if (typeof target === 'object') {
		let cloneTarget = {};
		for (let key in target) {
			cloneTarget[key] = deepClone(target[key]); // 递归核心代码
		}
		return cloneTarget;
	} else {
		return target;
	}
}

3、考虑数组和 null

function deepClone(target) {
	if (typeof target === 'object' && target !== null) {
		let cloneTarget = Array.isArray(target) ? [] : {};
		for (let key in target) {
			cloneTarget[key] = deepClone(target[key]); // 递归核心代码
		}
		return cloneTarget;
	} else {
		return target;
	}
}

上面的代码已经能解决大部分工作遇到的情况，但是在拷贝循环引用的对象时是不适用的，这会因为递归进入死循环而导致堆栈内存溢出。如：

let obj = {
    a: 1,
    b: 'hello',
    c: true,
    d: null,
    e: undefined,
    f: [1, 2, 3],
    g: () => {
        console.log('hello');
    }
}
obj.obj = obj;
console.log(deepClone(obj));

4、所以，我们还应考虑循环引用

解决循环引用问题，我们可以额外开辟一个存储空间，来存储当前对象和拷贝对象的对应关系，当需要拷贝当前对象时，先去存储空间中找，有没有拷贝过这个对象，如果有的话直接返回，如果没有的话继续拷贝，这样就巧妙化解的循环引用的问题。

这里我们利用ES6的新特性 Map 和 WeakMap，这种数据结构不允许有重复的值，也常用来做数组去重。

检查map中有无克隆过的对象
    有 > 直接返回
    无 > 将当前对象作为key，克隆对象作为value进行存储，继续克隆

function deepClone(target, map = new WeakMap()) {
	if (typeof target === 'object' && target !== null) {
		let cloneTarget = Array.isArray(target) ? [] : {};
		if(map.get(target)) return map.get(target);
		map.set(target, cloneTarget);
		for (let key in target) {
			cloneTarget[key] = deepClone(target[key], map); // 递归核心代码
		}
		return cloneTarget;
	} else {
		return target;
	}
}

到这应该能应付工作中的大部分情况了，当然还有很多种数据类型和情况没考虑，更多更详细的可以参考 https://juejin.im/post/5d6aa4f96fb9a06b112ad5b1 继续深挖