深拷贝与浅拷贝概念:
深浅拷贝出现的前提: 应用类型的数据(对象和数组)
深拷贝就是把目标对象里面的数据一个一个都复制下来,创建出一个一模一样的,存放地址不一样,互不影响。就像真假美猴王。改变其中一个对象中的内容,另一个对象不会受到任何影响。
浅拷贝就是单纯的复制内存地址,并没有复制对象本身,新旧两个都共享同一个内存。一荣俱荣一损共损的样子,任何一个对象里改变某一个属性值,那么另一个也会随之发生改变
**区别:**浅拷贝只能复制第一层,想要深度拷贝的话就要用到深拷贝了
接下来我们就以下面这个obj1对象为例子,进行深浅拷贝的演示
const obj1 = {
a: 1,
b: undefined,
arr: [1, 2, 3],
fun: () => {}
}
- JSON转换方法
const obj2 = JSON.parse(JSON.stringify(obj1))
//这个方法可以,只不过function和undefined这种情况下无法复制
缺点:你看到这里就会发现数据类型是 function 和 undefined 情况下无法复制,其他的都可以进行深层次的拷贝
- Object.assign()方法
const obj2 = Object.assign({},obj1)
缺点:这里就会发现使用Object.assign()只能深拷贝一级属性,二级以上的属性(引用类型)就是浅拷贝了
- 扩展运算符
const obj2 = {...obj1}
缺点:这个方法和上面使用Object.assign()方法使用的结果都是一样的。只能深拷贝一级属性,二级以上属性(引用类型)就是浅拷贝了
- 写一个递归(推荐,比较完美的解决方案)
封装一个DeepClone的深拷贝函数
function DeepClone(data) {
const newData = Array.isArray(data) ? [] : {}
for (let key in data) {
if (data[key] && typeof data[key] === 'object') {
newData[key] = DeepClone(data[key])
} else {
newData[key] = data[key]
}
}
return newData
}
//调用他
const obj2 = DeepClone(obj1)
这个是比较好的实现深拷贝的方法了。应该没有啥缺点吧。
感谢您的阅读,如果有什么建议的话可以互相交流,祝各位程序yuan们写代码无bug,永不加班,永不秃头!!!永不为奴!!!!!