对象的深浅拷贝

时间: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处理一下

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

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