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 相关文章推荐
地址栏上的一段语句,改变页面的风格。(教程)
Apr 02 Javascript
javascript 面向对象全新理练之继承与多态
Dec 03 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
JS实现支持Ajax验证的表单插件
Mar 24 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
快速解决处理后台返回json数据格式的问题
Aug 07 Javascript
js canvas实现二维码和图片合成的海报
Nov 19 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
JavaScript中关于base64的一些事
May 06 Javascript
Vue组件间数据传递的方式(3种)
Jul 13 Javascript
html实现随机点名器的示例代码
Apr 02 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实现详细解析
2013/08/24 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
python 合并文件的具体实例
2013/08/08 Python
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
在Python中使用第三方模块的教程
2015/04/27 Python
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
Python3.8中使用f-strings调试
2019/05/22 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
简单了解Python write writelines区别
2020/02/27 Python
python实现图像拼接
2020/03/05 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
戴森美国官网:Dyson美国
2016/09/11 全球购物
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
初三化学教学反思
2014/01/23 职场文书
党支部书记岗位责任制
2014/02/11 职场文书
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
销售类求职信
2014/06/13 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
年会邀请函范文
2015/01/30 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android