深浅拷贝--刨根问底

47 阅读2分钟

总是把深拷贝和浅拷贝傻傻分不清,以下主要讲一下js的数据类型和深拷贝,浅拷贝的关系以及项目中遇到数据浅拷贝的处理办法。

本文的思维导图如下:

ECMAScript数据.png

栈和堆的区别: 其实深拷贝和浅拷贝的主要区别就是其中在内存中的储存类型不同。 栈我们可以理解为子弹上膛,先进去的在栈底,后进来的在栈顶,子弹出膛时,在栈顶的先出去,后面依次;而堆我们可以理解为盲盒里面抽带有序号的小球,每一次抽是没有顺序的。

栈(stack)为自动分配的内存空间,它由系统自动释放;而堆(heap)则是动态分配的内存,大小不定也不互惠自动释放。

ECMAScript数据类型

基本类型数据包括

  • 基本数据类型:undefinednullStringNumberBoolean

基本类型的存储位置,值不可修改

基本数据类型存放在栈中,值不可修改,字符串中所有的方法看上去反悔了一个修改后的字符串,实际上返回的是一个新的字符串值,原值不改变

let str = 'abcdefg'
console.log(str[0] = '00') // 00
console.log(str) // abcdefg

基本类型比较实际上是值的比较

let a = '1'
let b = true
console.log(a == b) // true
console.log(a === b) // false

可以看见基本类型数据比较其实是值的比较,在这里注意到a==b输出为truea===b输出为false,这里是因为==会进行逻辑转换把字符串的1转化为数字1,而0是逻辑的false,1是逻辑的true, 所以我们在开发时,建议使用全等于判断,避免踩到坑

引用类型存放在堆中

  • 引用数据类型:FunctionArrayObject等 引用类型(object)是存放在堆内存中的,变量实际上是一个存放在栈内存的指针,这个指针指向堆内存中的内容。每个空间大小不一样,要根据情况进行特定的分配,例如:
var person1 = {name:'jozo'};
var person2 = {name:'xiaom'};
var person3 = {name:'xiaoq'};

image.png

引用类型值可变