当前位置:网站首页 > Vue.js开发 > 正文

js slice深拷贝(js深拷贝的原理)



在讲正题之前我们要先了解数据存储的方式

在讲之前我们要先知道值类型和引用类型的存储方式。

在JavaScript数据类型中有两种数据类型。

值类型字符串()、数字 ()、布尔 ()、空()、未定义()、。

存放在栈内存中的简单数据段,数据大小确定,内存空间大小可以分配。

引用数据类型:对象 () 、数组 ) 、函数 () 。

存放在堆内存中的对象,在栈内存中存的是一个指针,这个指针指向堆内存一个位置。再从堆内存中取得所需的数据。

存储如下图:

在这里插入图片描述

讲完存储的方式,我们来讲讲浅拷贝和深拷贝

拷贝也就是我们常常讲的copy,ctrl+c,ctrl+v,那么我们来看看例子

当我们对分别值类型和引用类型进行赋值。

在这里插入图片描述

现象:我们发现值类型并没有互相受到影响,然而数组(引用类型)brr数组添加元素的时候改变了arr数组。

解释分析:浅拷贝只会发生在引用类型身上,对于引用类型如果之进行简单的赋值,只会赋值指向堆内存的指针,这种称为浅拷贝。而深拷贝就是完全拷贝一个引用类型,为不是地址指针。

浅拷贝看下面这张原理图:

在这里插入图片描述

那么我们在赋值引用类型的时候肯定不能出现浅拷贝的现象,对原数据产生影响了。那么就要进行深拷贝

1.通过JSON.stringify和JSON.parse

可以深拷贝的数组和对象,但是不能拷贝函数,可以进行对象或者数组的嵌套拷贝。

缺点:无法实现对对象中方法的深拷贝

使用

例子:

在这里插入图片描述

2.扩展运算符

利用了对象的结构赋值特性方法。

缺点:无对对象里面嵌套的对象进行深拷贝,相当于只是对一层引用对象进行深拷贝

使用:

例子:

在这里插入图片描述

3.手写递归深拷贝函数

完美解决

函数:

例子:

在这里插入图片描述

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

到此这篇js slice深拷贝(js深拷贝的原理)的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • 电源pcie5.0什么意思(电源pcie是什么意思)2025-04-04 19:36:08
  • map转jsonobject报错(map转成json字符串)2025-04-04 19:36:08
  • jsjx是什么意思(jssj什么意思)2025-04-04 19:36:08
  • json字符串转map(json字符串转map集合)2025-04-04 19:36:08
  • vue 组件插槽(vue组件插槽怎么传参)2025-04-04 19:36:08
  • pcie5.0最新消息(pcie5.0有什么用)2025-04-04 19:36:08
  • pcie5.0(pcie5.0速度)2025-04-04 19:36:08
  • vue 怎么安装(vue怎么安装依赖)2025-04-04 19:36:08
  • pcie5.0什么时候上市(pcie5.0最新消息)2025-04-04 19:36:08
  • redhat6.9挂载硬盘(redhat7挂载本地yum)2025-04-04 19:36:08
  • 全屏图片