hb

再谈浅拷贝和深拷贝

Snipaste_20220402_160211.jpg

深拷贝和浅拷贝前面的文章也有所提及,不过在我从小白慢慢的成长之后,还是想再来说说这个东西。

先说说数据类型 JS中一共有8种数据类型:Number、BigInt、String、Boolean、Symble、Null、Undefined、Object。

前7种称为「原始类型」,最后一种Object称为「引用类型」,之所以把它们区分成两种类型,是因为「它们在内存中存放的位置不同」。

原始类型存放在栈空间中,具体点到执行上下文来说就是:用var定义的变量会存放在变量环境中,而用let、const定义的变量会存放在词法环境中。并且对原始类型来说存放的是值,而引用类型存放的是指针,指针指向堆内存中存放的真正内容。

Snipaste_20220401_161209.jpg

举个例子

        
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
let testobj = { name: "zhangsan", age: "22", hight: 181, }; let copy_testobj = testobj; copy_testobj.name = "lisi"; console.log("testobj", testobj); // console.log("copy_testobj", copy_testobj);//

Snipaste_20220401_162356.jpg copy_testobj和testobj都指向堆中的一个内存地址,拷贝都算不上

下面用es6的解构来一个浅拷贝

        
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
let testobj = { name: "zhangsan", age: "22", hight: 181, son: { name: "xiaoming", }, }; let copy_testobj = {...testobj} copy_testobj.name = "lisi"; copy_testobj.son.name = "bob"; console.log("testobj", testobj); console.log("copy_testobj", copy_testobj);

Snipaste_20220401_163113.jpg Snipaste_20220401_164231.jpg 这算是一个浅拷贝,son这个对象都被指向的是同一个内存地址,那么es6的解构显然是个浅拷贝。

其实之前一直被数组迷惑,但其实数据类型也已经告诉我们,数组也是个对象。也是自己的内存地址。

        
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
let testobj = { name: "zhangsan", age: "22", hight: 181, son: { name: "xiaoming", }, }; let arr = [testobj, "B", "C"]; let [a, ...items] = arr; console.log(a, items,arr); arr[0] = "A"; arr[1] = testobj; console.log(items,arr);

画了个图,红色操作代表arr[0]='A',绿色代表arr[1] = testobj;

微信图片_20220402101113.jpg

浅拷贝定义

创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,拷贝的就是内存地址 ,所以修改新拷贝的对象会影响原对象。

深拷贝定义

将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象

Snipaste_20220402_153808.jpg

那么深拷贝就是把数组里的对象全部迭代出来重新创建内存空间,具体方法只要参照之前文章的方法即可。

本文参考文章: 数组深拷贝_这一次,彻底理解JavaScript深拷贝 本文有更详细的解释。

Article at   2022/04/02 16:07  Published  code  Category,viewed  93  times

Relevant tags:    JS 

Address:   https://kedong.me/article/77

Copyright Notice: Freely reproduced for non-commercial use