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 相关文章推荐
在Ajax中使用Flash实现跨域数据读取的实现方法
Dec 02 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
javascript类型系统 Window对象学习笔记
Jan 07 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
Jul 06 Javascript
基于jQuery实现表格的排序
Dec 02 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 Javascript
JS实现简易计算器
Feb 14 Javascript
uniapp实现可滑动选项卡
Oct 21 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中防止伪造跨站请求的小招式
2011/09/02 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
php算法实例分享
2015/07/14 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
JS Array对象入门分析
2008/10/30 Javascript
JQuery CSS样式控制 学习笔记
2009/07/23 Javascript
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
bootstrap flask登录页面编写实例
2016/11/01 Javascript
js实现消息滚动效果
2017/01/18 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
一文了解Vue中的nextTick
2019/05/06 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
wxPython窗口中文乱码解决方法
2014/10/11 Python
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
python函数的5种参数详解
2017/02/24 Python
python 调用钉钉机器人的方法
2019/02/20 Python
Python reversed函数及使用方法解析
2020/03/17 Python
Python 如何测试文件是否存在
2020/07/31 Python
Unix里面如何在后台运行程序
2016/10/14 面试题
思想政治自我鉴定
2013/10/06 职场文书
英语老师推荐信
2014/02/26 职场文书
诉讼代理人授权委托书
2014/04/08 职场文书
学校教师安全责任书
2014/07/23 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
解除租赁合同协议书
2016/03/21 职场文书
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang