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 相关文章推荐
基于jquery的Repeater实现代码
Jul 17 Javascript
Javascript毫秒数用法实例
Feb 05 Javascript
Jquery基础之事件操作详解
Jun 14 Javascript
JavaScript实现简单的日历效果
Sep 25 Javascript
jQuery 选择符详细介绍及整理
Dec 02 Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 Javascript
BACKBONE.JS 简单入门范例
Oct 17 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
Vue封装的可编辑表格插件方法
Aug 28 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
Aug 12 Javascript
使用node-media-server搭建一个简易的流媒体服务器
Jan 20 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中使用curl_init函数的说明
2010/11/02 PHP
php文档更新介绍
2011/07/22 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
jQuery 位置插件
2008/12/25 Javascript
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
基于JQuery的Ajax方法使用详解
2017/08/16 jQuery
浅谈js中的bind
2019/03/18 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
理解python正则表达式
2016/01/15 Python
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
DataReader和DataSet的异同
2014/12/31 面试题
售后主管岗位职责
2013/12/08 职场文书
简历中个人自我评价范文
2013/12/26 职场文书
金融管理专业求职信
2014/07/10 职场文书
2015年幼儿园元旦亲子活动方案
2014/12/09 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript
用python自动生成日历
2021/04/24 Python