Javascript|前端js面试会问到的浅拷贝和深拷贝(以浅拷贝为例)

拷贝 首先,明白拷贝的含意,拷贝在我们通俗的讲来就是复制,一般用于对象的拷贝。将一个有数据的对象的内容拷贝到一个空对象中。使两个不同的对象,拥有相同的属性,并且操作其中一个对象时,另一个对象不会改变。
基础知识 数组和对象的赋值其实是复制的地址值,我们以数组为例:
Javascript|前端js面试会问到的浅拷贝和深拷贝(以浅拷贝为例)
文章图片

当b数组改变时,a数组也会跟着改变
Javascript|前端js面试会问到的浅拷贝和深拷贝(以浅拷贝为例)
文章图片

浅拷贝 浅拷贝的实现思路:
1.前提条件:一个带有属性的对象obj1{},和一个空对象obj2{}
2.怎么实现:遍历带有属性的对象obj1{},并且每次都将属性拷贝到空对象obj2中
实现代码如下
Javascript|前端js面试会问到的浅拷贝和深拷贝(以浅拷贝为例)
文章图片

这是输出结果:
Javascript|前端js面试会问到的浅拷贝和深拷贝(以浅拷贝为例)
文章图片

当我们改变ojb2的属性,obj1的属性不会改变,这样就完美的将obj1对象的内容完整的拷贝到了obj1中。
但是要注意的是 这只是简单类型的拷贝,也可以说是单一层次的拷贝,如果,我们需要拷贝的对象里面还有一个对象和数组,结果还会是一样的吗?
比如我们在要拷贝的对象obj1中再加入一个对象,那么还能实现相同的效果吗?直接尝试!
Javascript|前端js面试会问到的浅拷贝和深拷贝(以浅拷贝为例)
文章图片

运行结果如下
Javascript|前端js面试会问到的浅拷贝和深拷贝(以浅拷贝为例)
文章图片

此时看起来拷贝成功了,可是根据我们基础知识中的情况,我们要测试在拷贝过程中的是否存在地址值的拷贝,此时我们修改数组a,和对象b来看一下情况
Javascript|前端js面试会问到的浅拷贝和深拷贝(以浅拷贝为例)
文章图片

测试结果:
Javascript|前端js面试会问到的浅拷贝和深拷贝(以浅拷贝为例)
文章图片

我们发现在浅拷贝之后如果拷贝的对象中有数组,或者嵌套了一个对象,
那么拷贝的将是其本身的地址值,当其中一个对象的属性改变时,另一个也会跟着改变
总结:
浅拷贝,只能拷贝基本数据,当拷贝的对象中含有多层次结构的时候如(数组,对象之类)只将其地址值拷贝(详细去看开头的基础知识),并不会去新的开创一个内存空间,所以拷贝后的属性改变,原对象也会跟着改变。
【Javascript|前端js面试会问到的浅拷贝和深拷贝(以浅拷贝为例)】那么深拷贝就好理解了,拷贝完成后,即使拷贝的对象含有多层次结构,不管拷贝后的数据怎么改变,原来的数据都会保持不变。

    推荐阅读