阿里巴巴做特卖的网站,软件前端开发工程师,祥云户网站,如何优化网站关键词排名本篇文章咱们一起来学习下JS中的浅拷贝和深拷贝#xff0c;了解它们在内存上的区别#xff0c;并掌握浅拷贝和深拷贝的常用实现方法。
引用赋值 在学习拷贝之前#xff0c;咱们先来看一个常见的情景#xff0c;如下图#xff1a; 大家觉得这是深拷贝还是浅拷贝#xff0… 本篇文章咱们一起来学习下JS中的浅拷贝和深拷贝了解它们在内存上的区别并掌握浅拷贝和深拷贝的常用实现方法。
引用赋值 在学习拷贝之前咱们先来看一个常见的情景如下图 大家觉得这是深拷贝还是浅拷贝或者是其他的 答案是这种方式是引用赋值它既不是深拷贝也不是浅拷贝。在内存上的体现是person1和person2的内存指针都指向同一个堆内存对象验证方式如下图 从输出结果可以看到修改person1和surname属性person2的surname属性也发生了更改。
浅拷贝 浅拷贝比较常见的实现方法是通过展开运算符展开运算符被允许使用在对象字面量声明的时候如下图 在内存上的体现是person1和person2分别指向不同的堆内存对象验证方式如下图 从输出结果可以看到person2的surname属性并没有因为person1的surname属性发生改变而改变。
深拷贝 通常用于复杂类型的拷贝同时咱们也可以用来反向证明一下展开运算符是浅拷贝代码如下图 从输出结果可以看到1号小人的朋友从钱姓朋友变成了孙姓朋友而2号小人的朋友姓氏也随之改变这就说明person1和person2的friend指向的是同一个堆内存对象而深拷贝需要将嵌套的每一层的对象都拷贝成全新的堆内存对象常用的实现方法如下图 通过JSON.stringify方法将person1对象转为JSON再通过JSON.parse方法将JSON字符串转化为全新的JS对象从而实现深拷贝验证方式如下图 从输出结果可以看到1号小人的朋友从钱姓朋友变成了孙姓朋友2号小人的朋友仍然是钱姓朋友。
