Vue深浅拷贝

    个人理解,深/浅拷贝其实就是指向性的问题(说法可能不是很准确,话糙理不糙)。

    浅拷贝:新对象赋值,只是取的旧对象栈中的值,也就是引用对象的值。浅拷贝出的所有变量都只是指向了一处而已,故会互相干涉。
    深拷贝:会在堆里边开辟一个空间,存放自己的对象值。深拷贝出的所有变量都会开辟自己的空间来存放自己的值,因此指向也各不相同,故不会互相干涉。

    简单的赋值只是做了浅拷贝,所以才会出现我明明给了b值却连a的值也改变的情况,如下:

    例子1:
      var a = 1,b=a;
      console.log(a); // 1
      console.log(b) // 1
      b = 2;
      console.log(a); // 1
      console.log(b) // 2

    例子2-数组:
      var a = [1,2,3];
      var b = a;
      b.push(4); // b中添加了一个4
      alert(a); // a变成了[1,2,3,4]

    例子3-对象:
      var obj = {a:10};
      var obj2 = obj;
      obj2.a = 20; // obj2.a改变了,
      alert(obj.a); // 20,obj的a跟着改变 !!!

这就是由于对象类型直接赋值,只是将引用指向同一个地址,导致修改了obj会导致obj2也被修改。
这种传参方式是浅拷贝,多个地址指向同一个堆,所有两方会一起修改。

    深拷贝的几种方法

        深拷贝对象 / 数组:{...xxx} / [...xxx] 可以深拷贝对象和数组;

this.bean1 = { ...this.bean2 }

this.tableData1 = [...this.tableData2]

        仅深拷贝对象:JSON.parse(stringify(xxx)) 可以深拷贝对象;

 const a = JSON.parse(JSON.stringify(ary))

        仅深拷贝基本对象:object.assign(xx,xxx) 可以深拷贝基本对象(对象中包裹数组的不行),object.assign()的方式是直接返回一个新对象。

const params = {
    name: bean.name,
    actuTime: bean.actuTime,
    date: bean.inocDate,
    symptomNames: names,
    symptom: bean.symptom
}
this.tableData.push(
    Object.assign(params, { unitcode: this.unitCode, manCode: this.empCode })
)

        但如果需要将一个JSON对象赋值给一个元素为JSON的数组的某一项,那只能挨个遍历赋值了,但是如果JSON属性项很多,则可以考虑for....in遍历的情况:
 

指定json给table指定项赋值:
    const params = {
        name: bean.name,
        actuTime: bean.actuTime,
        date: bean.inocDate,
        symptomNames: names,
        symptom: bean.symptom
    }

    const data = this.tableData[bean.ids] // 已知需要赋值的table指定项

    // 遍历赋值
    for (const item in data) {
      if (params[item]) {
        data[item] = params[item]
      }
    }

  • 6
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值