JavaScript:深拷贝与浅拷贝如此简单

这是小白自己对深拷贝与浅拷贝片面的理解,大佬勿喷!

当我们把a对象赋值给b变量时,此时被赋值的变量b存的只是栈内存里面一个内存地址,如果这个时候你去改变b或者b任意一个对象的值时,a和b对象里面的值也会跟着变化,

let a={}
let b=a
b.name='和'
console.log(a) // {name: "和"}

那么为什么会这样呢,上面我说道此时被赋值的变量b存的只是栈内存里面一个内存地址,由于a和b对象存的内存地址都是指向堆内存,你往b对象里面新增一个属性或者修改一个属性时,就是改变的堆内存里面存储的值,栈和堆的释义;注:链接内容不是小白自己写的,看到解释的还可以所以附上链接,大佬勿喷。

浅拷贝

拷贝一个对象的时候如果对象属性的值包含有Object类型的值,那么你从两个对象中任意一个对象去改变Object类型的值时,两个对象值也会相对应的改变

//方法一
    let a = {
      name: '小明',
      age: 12,
      _obj: { name: '小红', age: 18 },
    }
    let b = Object.assign({}, a)
    b._obj.name = '小月'
    b._obj.sex = '女'
    console.log(a)
/*
打印结果
{name: "小明", age: 12, _obj: {…}}
age: 12
name: "小明"
_obj: {name: "小月", age: 18, sex: "女"}
*/
//方法二:使用  for  in 循环,遍历每一个属性,将他们赋值给新的对象。
//方法三:使用ES6里面扩展运算符 let b = { ...a }
//方法就不一一举例了,结果都是一样的

深拷贝

拷贝一个Object对象的时候,我们去改变两个对象中任意一个里面的数据,而不对另一个对象产生影响时,就是深拷贝

//方法一
copy(data) {
  //定义一个空对象
  const obj = {}
  //判断传入的参数是否为object
  if (typeof data === 'object') {
    for (let key in data) {
      const element = data[key]
      //判断传入的参数是否为object 如果是就递归拷贝,不是就简单拷贝
      if (typeof element === 'object') {
        obj[key] = copy(element)
      } else {
        obj[key] = element
      }
    }
    //拷贝完成返回obj
    return obj
  } else {
    return data
  }
},
//方法二 JSON.parse、JSON.stringfiy 把数据转成JSON字符串在赋值给另一个的变量然后在转一下(不能拷贝函数,以及一些则表达式)
//方法三 $.extend()(JQuery里面的方法,本人没用过,需自己探索!)

此次附上ts的深拷贝方法

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 什么是深拷贝,什么是浅拷贝 说到深浅拷贝,就不得不提到另外一个知识点,那就是引用类型和基本类型以及堆和栈的区别。再...
    jeff_nz阅读 4,386评论 0 0
  • 一、浅拷贝 在定义一个对象或数组时,变量存放的往往是一个引用地址。当我们使用对象拷贝时,如果属性是对象或数组时这是...
    艾萨克菊花阅读 1,358评论 0 0
  • 项目中会遇到的体现。对一个table进行操作后,浅拷贝引用的form一起被改变。深拷贝和浅拷贝简单解释浅拷贝和深拷...
    aatter阅读 2,839评论 0 0
  • 写在前面 各类技术论坛关于深拷贝的博客有很多,有些写的也比我好,那为什么我还要坚持写这篇博客呢,之前看到的一篇博客...
    心_c2a2阅读 21,294评论 3 18
  • 写在前面 各类技术论坛关于深拷贝的博客有很多,有些写的也比我好,那为什么我还要坚持写这篇博客呢,之前看到的一篇博客...
    Leson17阅读 1,020评论 0 0