JavaScript深拷贝和浅拷贝概念与用法实例分析


Posted in Javascript onJune 07, 2018

本文实例讲述了JavaScript深拷贝和浅拷贝概念与用法。分享给大家供大家参考,具体如下:

js中的浅拷贝和深拷贝,只是针对复杂数据类型(ObjcetArray)的复制问题。简单来讲浅拷贝和深拷贝都可以实现在原有对象的基础上再生成一份的作用。但是根据新生成的对象能否影响到原对象可以分为浅拷贝和深拷贝。

概念1:浅拷贝

浅拷贝就是指拷贝引用,新生成的引用和原来的引用都是指向同一个对象的实例,彼此之间的操作会相互影响。

概念2:深拷贝

在堆中重新开辟内存,把原引用对应的对象实例中所有的内容进行拷贝,因此保证了深拷贝的对象和原来的对象是完全隔离的,他们之间相互没有影响。

概念3:数组深拷贝的实现

1. 使用for循环

<script type="text/javascript">
  var arr1=['a','b','c'];
  var arr2=[];
  function deepCopy(arr1,arr2){
    for(var i=0;i<arr1.length;i++){
      arr2[i]=arr1[i];
    }
  }
  deepCopy(arr1,arr2);
  arr2[1]='d';
  console.log(arr1);//['a','b','c']
  console.log(arr2);//['a','d','c']
</script>

2. 使用slice()方法

<script type="text/javascript">
  var arr1=['a','b','c'];
  var arr2=arr1.slice(0);
  arr2[1]='d';
  console.log(arr1);//['a','b','c']
  console.log(arr2);//['a','d','c']
</script>

3. 使用concat方法

<script type="text/javascript">
    var arr1=['a','b','c'];
    var arr2=arr1.concat();
    arr2[1]='d';
    console.log(arr1);//['a','b','c']
    console.log(arr2);//['a','d','c']
</script>

概念4:对象的深拷贝

1. 使用for循环

<script type="text/javascript">
  var obj = {
    name: 'FungLeo',
    sex: 'man',
    old: '18'
  }
  function copyObj(obj) {
    let res = {}
    for (var key in obj) {
      res[key] = obj[key]
    }
    return res
  }
  var obj2 = copyObj(obj);
  obj2["name"]="kka";
</script>

2. 借助JSON来实现

<script type="text/javascript">
  var obj = {
    name: 'FungLeo',
    sex: 'man',
    old: '18'
  }
  var obj2=JSON.parse(JSON.stringif(obj));
  obj2["name"]="kka";
</script>

总结:以上就是实现数组和对象深拷贝的一些常用方法,可以结合具体的情形使用适合的方法。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
prototype 学习笔记整理
Jul 17 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
Aug 23 Javascript
Javascript 遍历页面text控件详解
Jan 06 Javascript
ExtJS4 动态生成的grid导出为excel示例
May 02 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 Javascript
socket.io实现在线群聊功能
Apr 07 Javascript
AngularJS实现注册表单验证功能
Oct 16 Javascript
js 数组详细操作方法及解析合集
Jun 01 Javascript
react native 文字轮播的实现示例
Jul 27 Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
AngularJS 前台分页实现的示例代码
Jun 07 #Javascript
浅谈PDF.js使用心得
Jun 07 #Javascript
vue better scroll 无法滚动的解决方法
Jun 07 #Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 #Javascript
JavaScript 正则命名分组【推荐】
Jun 07 #Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 #Javascript
vue.js实现标签页切换效果
Jun 07 #Javascript
You might like
如何对PHP程序中的常见漏洞进行攻击(下)
2006/10/09 PHP
php 特殊字符处理函数
2008/09/05 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
在Python中定义和使用抽象类的方法
2016/06/30 Python
Python利用Beautiful Soup模块修改内容方法示例
2017/03/27 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
LINUX下线程,GDI类的解释
2012/04/17 面试题
连锁经营管理专业大学生求职信
2013/10/30 职场文书
本科应届生求职信
2014/08/05 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
小学生读书笔记范文
2015/06/30 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
用python实现监控视频人数统计
2021/05/21 Python
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP