位置: 编程技术 - 正文

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)

  • 中了单位大奖要缴个税吗?
  • 往年有亏损本年没有亏损
  • 农产品加工会计分录
  • 收入费用表本期盈余和资产负债表本期盈余
  • 发生额对照表
  • 企业账号变更
  • 税收优惠有哪些类型
  • 公司转让会计分录
  • 增值税即征即退会计处理
  • 无形资产要入账吗
  • 收到凭证的收据
  • 经营现金流动比率公式
  • 当月认证的发票可以当月抵扣吗
  • 不涉及税收
  • 网上申领发票几天能寄送到?
  • 2018税务金四发展预测会有哪些?
  • 一年过去了,特朗普减税效果如何?
  • 资本公积与股东借款
  • 应付账款周转天数上升的原因
  • 企业偷税行为
  • 发票有几个
  • 日工资计算的三种方法
  • 生产型企业公司有哪些
  • 测速网在线测速
  • 停工期间的各项工作包括
  • 收到材料未收到会计处理
  • macos itunes
  • php中session什么意思
  • 对公账户发放工资要固定几号打吗
  • win10预览版是什么意思
  • 在win10中如何设置在开始菜单中显示应用列表
  • 栀子花的养殖方法和注意事项茉莉花
  • win7旗舰版系统怎么样
  • 蜻蜓翅膀特写怎么画
  • 免税企业所得税的有
  • yew 框架
  • web全栈工程师是干什么的
  • php微信公众号开源框架
  • nvm切换node版本后node -v报错
  • centos安装epel
  • yolo v4 v5
  • php 编码
  • phpcms v9官网
  • 个人佣金收入怎样交税
  • 发票无法收回会计分录
  • MySQL的LEFT JOIN表连接的进阶学习教程
  • 金税盘技术维护费每年都减免么
  • 套期保值是什么意思举个例子
  • 年终奖的个税税率表
  • 存货周转率是指企业某一会计
  • 无形资产比如
  • 广告服务费一般几个点
  • 收到土地使用权计入什么科目
  • 以前年度应付款少记怎么入账
  • 新税法实施后以前的条例规章作废吗
  • 房产税计入管理费还是税金及附加
  • 案例解析企业所需资金
  • 去年未开票收入未申报
  • 财务报表是否合法公允
  • 会计所说的内账外账
  • 深度解析天梁坐命
  • win10 0×0000007b怎么解决
  • win10拦截在哪里关
  • win7系统开机无限重启
  • win8怎么删除输入法
  • windows mobile应用
  • node.js 模块
  • 安卓如何取消长按电源键关机
  • python元祖内置函数
  • jquery返回顶部
  • js判断密码是否符合标准
  • 安卓中五种常见布局的特点
  • 技术咨询服务费税率
  • 成都市个人房屋出租税费
  • 绿化工程项目
  • 机打发票教程视频
  • 免税饲料发票怎么开具
  • 河南政务服务网官网
  • 小规模纳税人需要建账吗
  • 零申报印花税的应税凭证名称怎么填写
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设