深拷贝和浅拷贝

前端面试必备-深拷贝和浅拷贝

浅拷贝

概念：在拷贝数据的时候只拷贝一层，更深层次的数据只拷贝地址，原对象和拷贝的对象会相互影响

实现方式

1. Object.assign()

   代码实现：

   const obj = {
   			name: '张三',
   			age: 18,
   			hobby: ['吃饭', '睡觉'],
   		}
   		const obj1 = {}
   		Object.assign(obj1, obj)
   		obj.hobby.push('打豆豆')
   		console.log(obj, obj1)
   

   结果如下：
   

2. 扩展运算符

   代码实现：

   const obj = {
   			name: '李四',
   			age: 20,
   			hobby: ['篮球', '跑步']
   		}
   		const obj1 = {
   			...obj
   		}
   		obj1.name = '王五'
   		obj.hobby.push('游泳')
   		console.log(obj, obj1)
   

​ 打印结果：

​

​ 总结：上面两个方法都是实现的浅拷贝，可以看到当修改拷贝的对象的基本数据类型时，原对象并不会受到影响，但是当修改原对象的引用数据类型的时候，拷贝的对象也会受到影响。

深拷贝

​ 概念：深拷贝就是无限层级的拷贝，更深层次的数据也不是只拷贝地址，会将整个拷贝，在内存中开辟一个新的地址，深拷贝的原对象和拷贝的对象不会相互影响。

实现方式

1. JSON方法实现深拷贝

   先将需要拷贝的对象利用JSON.stringify转成字符串，然后再利用JSON.parse将字符串转成对象赋值给新的对象，即可完成深拷贝。

   代码：

   let obj = {
   			name: '婉儿',
   			age: 18,
   			hobby: ['游戏', '躺平']
   		}
   		let obj1 = JSON.parse(JSON.stringify(obj))
   		obj.hobby.push('吃饭')
   		console.log(obj, obj1)
   

   结果：
   

​ 这种方法实现深拷贝是存在以下问题的：

​ ① function和undefined会直接丢失

​ ② NaN、infinity和-infinity会变成null

​ ③ RegExp、Error对象只得到空对象

2. 递归深拷贝

   代码：

   function deepclone(target) {
   			if (typeof target === 'object') {
   				let cloneTarget = Array.isArray(target) ? [] : {};
   				for (const key in target) {
   					cloneTarget[key] = deepclone(target[key]);
   				}
   				return cloneTarget;
   			} else {
   				return target;
   			}
   		}
   
   		let obj = {
   			name: '王二',
   			age: 30,
   			hobby: ['吃', '睡'],
   			chidren: {
   				name: '王三',
   				age: 10,
   				hobby: ['玩']
   			}
   		}
   		const obj1 = deepclone(obj)
   		obj.hobby.push('玩')
   		obj.chidren.name = '赵四'
   		console.log(obj, obj1);
   

   结果：
   

​ 这种方法存在循环引用的问题，如果对象中存在循环引用，那么机会进入死循环导致栈溢出。要解决这个问题，可以额外开辟一个存储空间，来存储当前对象和拷贝对象的对应关系。

3. lodash

   import lodash from 'lodash'
   const obj1 = lodash(obj)