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)

JS深浅拷贝理解案例_第1张图片

可以发现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)

JS深浅拷贝理解案例_第2张图片

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

你可能感兴趣的:(JS深浅拷贝理解案例)