对象的深浅拷贝

时间：2021-10-18 19:47:37

1.为什么会产生深浅拷贝？

首先我们需要知道新建一个对象的流程：①：对象属于引用类型的，所以浏览器会为其开辟一个新的内存空间，并为它分配一个16进制的地址 ；②：按照一定的顺序，把对象的键值对存储到内存空间；③：把开辟的内存地址赋值给变量（或事件），以后变量就通过地址找到内存空间，然后进行操作。

举例子：

var obj ={
　　name:'alhh',
　　age:'18'
}
var obj2 = obj
obj2.name = 'LQQ'
console.log(obj.name) //LQQ
console.log(obj2.name) //LQQ
//obj和obj2共享一个内存地址 修改了obj2就相当于修改了obj1

2.浅拷贝例子

在实际项目中Object.assign(target,...source)：可以把多个源对象自身的可枚举的属性拷贝给目标对象，然后返回的是目标对象

举例子：

var obj = {
    info:{
    name:'alhh',
    age:'18'
    }
}  
var copyObj = Object.assign({},obj) 
copyObj.info.name='lqq'
console.log(obj.info.name) //lqq
console.log(copyObj.info.name) //lqq

特别注意的是：当object是一层的时候，是深拷贝

举例子：

var obj = {
    name:'alhh'
}
var copyObj = Object.assign({},obj)
copyObj.name = 'lqq'
console.log(obj) //alhh
console.log(copyObj) //lqq

在做电商的小程序的时候 有个页面是选择商品的颜色，尺寸，型号等等，就可以采用对象的浅拷贝，思路：把颜色，尺寸抽成一个小组件，然后选中之后向上传值，传值内容是一个对象，属性为value，name，父级接受传过来的值，重点来喽，当用户修改颜色或者尺码的时候，由于对象的浅拷贝，父级接收到的值就是每次修改后的。

3.深拷贝例子

在做后台管理系统的时候，采用的是vue+elementui 表格渲染数据之后点击某一栏去编辑，发现编辑框里的内容修改后（还未点确定按钮时候），list列表里面的数据也会即时修改，有点误导用户的感觉，这是由于对象的浅拷贝造成的，于是采用JSON.parse，JSON.stringify就解决了

JSON.parse(JSON.stringify(editInfo))
//将传给编辑框的值JSON处理一下

还有一种方法：手写递归的原理：遍历引用类型的（对象、数组），直到里面都是基本数据类型，然后再去复制

后期会陆续补充项目中运用到深浅拷贝的例子，欢迎补充~

 

标签：

相关文章