位置: 编程技术 - 正文

javascript深拷贝(deepClone)详解(js深拷贝的三种实现方式)

编辑:rootadmin

推荐整理分享javascript深拷贝(deepClone)详解(js深拷贝的三种实现方式),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js中深拷贝的方法,js深拷贝的三种实现方式,JavaScript深拷贝一个对象,js深拷贝拷贝函数,js深拷贝拷贝函数,js中深拷贝的方法,JavaScript深拷贝一个对象,js深拷贝的三种实现方式,内容如对您有帮助,希望把文章链接给更多的朋友!

javascript深拷贝是初学者甚至有经验的开发着,都会经常遇到问题,并不能很好的理解javascript的深拷贝。

深拷贝(deepClone)?

与深拷贝相对的就是浅拷贝,很多初学者在接触这个感念的时候,是很懵逼的。

为啥要用深拷贝?

在很多情况下,我们都需要给变量赋值,给内存地址赋予一个值,但是在赋值引用值类型的时候,只是共享一个内存区域,导致赋值的时候,还跟之前的值保持一直性。

看一个具体的例子

图解:

这下就很好理解为什么引用值类型数据相互影响问题。

实现

实现一个深拷贝函数,就不得不说javascript的数值类型。

判断javascript类型

javascript中有以下基本类型

类型 描述undefined undefined类型只有一个值undefined,它是变量未被赋值时的值null null类型也只有一个值null, 它是一个空的对象引用Boolean Boolean有两种取值true和falseString 它表示文本信息Number 它表示数字信息Object 它是一系列属性的无序集合, 包括函数Function和数组Array使用typeof是无法判断function和array的,这里使用Object.prototype.toString方法。[默认情况下,每个对象都会从Object上继承到toString()方法,如果这个方法没有被这个对象自身或者更接近的上层原型上的同名方法覆盖(遮蔽),则调用该对象的toString()方法时会返回"[object type]",这里的字符串type表示了一个对象类型][1]

实现deepClone

对于非引用值类型的数值,直接赋值,而对于引用值类型(object)还需要再次遍历,递归赋值。

javascript深拷贝(deepClone)详解(js深拷贝的三种实现方式)

这里有个点大家要注意下,对于function类型,博主这里是直接赋值的,还是共享一个内存值。这是因为函数更多的是完成某些功能,有个输入值和返回值,而且对于上层业务而言更多的是完成业务功能,并不需要真正将函数深拷贝。

但是function类型要怎么拷贝呢?

其实博主只想到了用new来操作一下,但是function就会执行一遍,不敢想象会有什么执行结果哦!o(?□?)o!其它暂时还没有什么好的想法,欢迎大家指导哦!

到这里差不多也就实现完了深拷贝,又有人觉的怎么没有实现浅拷贝呢?

浅拷贝?

对于浅拷贝而言,可以理解为只操作一个共同的内存区域!这里会存在危险!(。?。*)

如果直接操作这个共享的数据,不做控制的话,会经常出现数据异常,被其它部分更改。所以应该不要直接操作数据源,给数据源封装一些方法,来对数据来进行CURD操作。

到这里估计就差不多了,但是作为一个前端,不仅仅考虑javascript本身,还得考虑到dom、浏览器等。

Element类型

来看下面代码,结果会返回啥呢?

Object.prototype.toString.call(document.getElementsByTagName('div')[0])

答案是[object HTMLDivElement]

有时候保存了dom元素, 一不小心进行深拷贝,上面的深拷贝函数就缺少了对Element元素的判断。而判断Element元素要使用instanceof来判断。因为对于不同的标签,tostring会返回对应不同的标签的构造函数。

其它方式?

jquery的实现

详见

Javascript中indexOf()和lastIndexOf应用方法实例 indexOf()方法indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置。注释:indexOf()方法对大小写敏感!注释:如果要检索的字符串值没有出

详解Javascript ES6中的箭头函数(Arrow Functions) ES6可以使用箭头(=)定义函数,注意是函数,不要使用这种方式定义类(构造器)。一、语法1.具有一个参数的简单函数varsingle=a=asingle('hello,world')//'hell

浅析Javascript ES6中的原生Promise 前言一个Promise对象可以理解为一次将要执行的操作(常常被用于异步操作),使用了Promise对象之后可以用一种链式调用的方式来组织代码,让代码更加

标签: js深拷贝的三种实现方式

本文链接地址:https://www.jiuchutong.com/biancheng/373575.html 转载请保留说明!

上一篇:自动化测试读写64位操作系统的注册表(自动化测试读写题答案)

下一篇:详解Javascript ES6中的箭头函数(Arrow Functions)

  • 企业向红十字会捐赠可以抵扣所得税吗
  • 长租公寓 税费
  • 明股实债的风险与防范
  • 工会经费和工会会员会费
  • 酒店维修费计入什么费用
  • 网上社保增减员操作流程
  • 销项税最后转到哪里
  • 个体户核定双定户是否可以年度汇算清缴
  • 城市维护建设税优惠政策
  • 房地产开发企业增值税税率
  • 工程实际成本核算例题
  • 电商一定要注册公司吗
  • 公司成本票不够交税多少
  • 季度销售额不超过30万,城建税减免
  • 股东投资款印花税多少
  • 直接计入所有者权益的利得是
  • 上个月的印花税,这个月交款怎么做分录
  • 创新券兑付怎么操作
  • 主营业务成本记账
  • 支付应付账款的会计科目
  • 简述资产的概念特征以及确认条件
  • 自建自用建筑物,其自建行为不是建筑业税目的征税范围
  • 打开我的电脑出现找不到应用程序
  • 退留抵税额会计分录
  • 苹果电脑mac系统怎么用
  • 记账凭证的摘要是什么意思
  • 超率累进税率和超倍累进税率
  • 银行本票实际金额小于票面金额
  • php的递归
  • element_ui
  • 建筑工程企业管理费包括哪些内容
  • win7纯净版系统怎么安装
  • wordpress自定义函数
  • 结转已销售产品成本20000元
  • 消防工程款支付方式
  • php匿名函数为何不匿名
  • php静态属性和静态方法
  • 预定义变量是什么
  • 行政单位基建账户可以建立吗为什么
  • 机器学习评估指标 - f1, precision, recall, acc, MCC
  • 帝国cms功能
  • system error
  • 承包安装工程活怎么接
  • 税收优惠属于政府补助
  • php shell_exec
  • python如何合并字典
  • 织梦如何添加浮动广告
  • 高并发数据库解决方案
  • MySQL 5.7 create VIEW or FUNCTION or PROCEDURE
  • PostgreSQL 安装和简单使用第1/2页
  • 企业应纳税额计算直接利息的应纳税额
  • 递延所得税资产和负债账务处理
  • 提取公积金收手续费吗
  • 个人所得税计算方法2023计算器
  • 利润分配明细科目有哪些
  • 道路交通事故中施救费应如何处理?
  • 库存现金多出来怎么调账
  • 增值税发票红冲和作废的区别
  • 商业承兑汇票提示付款流程
  • 业务招待费包含样品费吗
  • 成本会计做什么工作内容
  • mysql a.
  • freebsd操作命令
  • 无线网卡搜索不到无线网
  • 微软报错是什么意思
  • linux终端有哪些
  • Linux安装配置jdk
  • xcode怎么新建项目
  • 用户体验ui
  • shell提示
  • ssh远程执行命令返回结果存成本地变量
  • jquery往对象添加元素
  • 简述python语言
  • 国家税务局级别排名
  • 地税局公务员考试科目
  • 江苏省税务局书记局长
  • 企业代扣代缴个人所得税怎么算
  • 公司可以报停吗
  • 税务核查是什么意思
  • 公民海外收入纳税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设