vue 爬坑 之js 对象/数组 赋值/拷贝 解决VUE中赋值引用后数据双向改变的问题

浅拷贝这里就不讲了,我们直接讲深拷贝

正常的数组/对象拷贝可以直接用

const cloneObj = JSON.parse(JSON.stringify(Obj));

这种方式可以解决相当多一部分的赋值问题,但是一些特殊属性除外(undefined/function)

在vue 或者js 中有时需要对一些特殊数据处理,比如VUE中的table等…
这个时候就需要用到第二种方法处理数据

附代码:

/** 
  * 深拷贝  
  *  @param source Array/Object  对象/数组
  */
util.deepClone = function (source){
  const targetObj = source.constructor === Array ? [] : {}; // 判断复制的目标是数组还是对象
  for(let keys in source){ // 遍历目标
    if(source.hasOwnProperty(keys)){
      if(source[keys] && typeof source[keys] === 'object'){ // 如果值是对象,就递归一下
        targetObj[keys] = source[keys].constructor === Array ? [] : {};
        targetObj[keys] = util.deepClone(source[keys]);
      }else{ // 如果不是,就直接赋值
        targetObj[keys] = source[keys];
      }
    }
  }
  return targetObj;
};

我这里是封装在了工具类里,单独引用的小伙伴可自行把 util. 去掉.
这里是通过遍历赋值来处理数据的。

如果有更好的方法欢迎一起交流讨论.

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

晴天有点孤单

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值