JS深浅拷贝理解案例

先来说一下浅拷贝吧
浅拷贝:只是拷贝一层,如果遇到深层次的,比如对象,数组.只是拷贝过来了地址,如果改变这个数据的话会影响原数据

先写一个案例吧

var  obj = {
    id:1,
    name:'andy',
    msg:{
      age:18
    }
  }
  var o ={}
  for(var k in obj){
    // k 是属性名  obj[k] 属性值
    o[k] = obj[k]
  }
  console.log(o)
  但是当我们改变拷贝过来的msg的值的时候
  o.msg.age =20
  console.log(obj)

在这里插入图片描述

可以发现obj里面的也改变了
或者这样写浅拷贝太麻烦,用es6写法,简单粗暴

 Object.assign(o,obj)

再说一下深拷贝
深拷贝拷贝多层,每一级别得数据都会拷贝,不会影响原数据

先写一个案例吧

var objs = {
    id:1,
    name:'gogoing',
    msgs:{
      age:18
    },
    color:['pink','red']
  }
  var j = {}
  //封装函数
  function deepCopy(newobj,oldobj){
    for(var k in oldobj){
      //判断我们的属性值属于哪种数据类型
      //1.获取属性值 oldobj[k]
      var item  = oldobj[k]
      // 2.判断这个值是否是数组
      // 注意:这个地方必须要先判断数组,再写对象,因为数组也是对象
      if(item instanceof Array){
       newobj[k] =[];
       deepCopy(newobj[k],item)
      }else if(item instanceof Object){
       // 3.判断这个值是否是对象
       newobj[k] = {}
       deepCopy(newobj[k],item)
      }else{
      // 4.属于简单数据类型
       newobj[k] = item
      }
    }
  }
  deepCopy(j,objs)
  console.log(j)
  j.msgs.age = 20
  console.log(objs)

在这里插入图片描述

可以发现,原数据没有改变

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值