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 相关文章推荐
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 Javascript
JavaScript中Cookie操作实例
Jan 09 Javascript
JS+CSS实现仿新浪微博搜索框的方法
Feb 24 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
Jun 19 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 Javascript
select2 ajax 设置默认值,初始值的方法
Aug 09 Javascript
生产制造追溯系统之再说条码打印
Jun 03 Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 Javascript
微信小程序封装多张图片上传api代码实例
Dec 30 Javascript
ES2020 已定稿,真实场景案例分析
May 25 Javascript
Openlayers实现地图的基本操作
Sep 28 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中通过smtp发邮件的类,测试通过
2007/01/22 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
python2与python3共存问题的解决方法
2018/09/18 Python
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
带你认识Django
2019/01/15 Python
pymongo中group by的操作方法教程
2019/03/22 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
Pandas分组与排序的实现
2019/07/23 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
python正则表达式实例代码
2020/03/03 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
HTML5对手机页面长按会粘贴复制禁用的解决方法
2016/07/19 HTML / CSS
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
2016/12/20 HTML / CSS
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
工业设计专业推荐信
2013/10/29 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
法人代表任命书范本
2014/06/05 职场文书
物业工程部岗位职责
2015/02/11 职场文书
导游词之韩国济州岛
2019/10/28 职场文书
Linux在两个服务器直接传文件的操作方法
2022/08/05 Servers