深拷贝与浅拷贝

深拷贝与浅拷贝

深拷贝与浅拷贝主要针对的是对象类型数据,有时我们需要对数据复制一份进行操作,我们最先想到的肯定是直接赋值操作,例如下面这样:

const obj = {
	name: '小于',
	age: 18,
}
const obj1 = obj
//改变obj1里面的数据
obj1.name = '小王'
console.log(obj1)      //{name: '小王', age: 18}
console.log(obj)       //{name: '小王', age: 18}

可以看到,改变了obj1对象里面的内容,obj对象里面的也改变了,显然不符合我们的需求

浅拷贝:

如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址（新旧对象共享同一块内存），所以如果其中一个对象改变了这个地址，就会影响到另一个对象

实现浅拷贝的方法

Object.assign方法
…展开运算符
等等

代码演示

const obj = {
	name: '小于',
	age: 18,
}
const obj1 = {}
Object.assign(obj1, obj)
//改变obj1里面的数据
obj1.name = '小王'
console.log(obj1)        //{name: '小王', age: 18}
console.log(obj)          //{name: '小于', age: 18}

这里可以看到是没问题的,但是请看下面代码

const obj = {
	name: '小于',
	age: 18,
	hobby: {
	    football: true
	}
}
const obj1 = {}
Object.assign(obj1, obj)
//改变obj1里面的数据
obj1.hobby.football = false
console.log(obj1)
console.log(obj)

运行结果

可以看到如果内部是对象类型还是没有实现我们想要的效果,所以我们应该使用深拷贝

深拷贝

深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象（新旧对象不共享同一块内存）,且修改新对象不会影响原对象

实现深拷贝的方法

1. 利用递归函数

           const obj = {
				name: '小于',
				age: 18,
				hobby: {
					football: true
				}
			}
			
			function deepCopy(newObj, oldObj) {
				for(let k in oldObj) {
					if(oldObj[k] instanceof Array) {
						newObj[k] = []
						deepCopy(newObj[k], oldObj[k])
					} else if(oldObj[k] instanceof Object) {
						newObj[k] = {}
						deepCopy(newObj[k], oldObj[k])
					} else {
						newObj[k] = oldObj[k]
					}
				}
			}
			
			const obj1 = {}
			deepCopy(obj1, obj)
			obj1.hobby.football = false
			console.log(obj1)
			console.log(obj)

可以看到这正是我们想要的效果就实现了深拷贝啦,但是这只是一个我们练习的方法,实际深拷贝函数要比这个复杂,下面有更好的方式
2. JSON.stringify()

			const obj = {
				name: '小于',
				age: 18,
				hobby: {
					football: true
				}
			}
			
			const obj1 = JSON.parse(JSON.stringify(obj))
			//实现效果和上面相同
			//JSON.stringify()  将对象转换成JSON字符串
			//JSON.parse()     将JSON字符串转换成对象

3. 利用lodash工具库中深拷贝的方法