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 uploadify 上传文件
Nov 09 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
node.js中的buffer.copy方法使用说明
Dec 14 Javascript
jQuery通过deferred对象管理ajax异步
May 20 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
May 30 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 Javascript
React组件中的this的具体使用
Feb 28 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
JS函数进阶之prototy用法实例分析
Jan 15 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 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基础知识:类与对象(5) static
2006/12/13 PHP
php中使用Curl、socket、file_get_contents三种方法POST提交数据
2011/08/12 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
Prototype 学习 工具函数学习($方法)
2009/07/12 Javascript
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
js获取height和width的方法说明
2013/01/06 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
vuex直接赋值的三种方法总结
2018/09/16 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
使用PyCharm配合部署Python的Django框架的配置纪实
2015/11/19 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
Python3中使用PyMongo的方法详解
2017/07/28 Python
python 判断文件还是文件夹的简单实例
2019/06/10 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
国贸专业的职业规划范文
2014/01/23 职场文书
精通CAD能手自荐书
2014/01/31 职场文书
党员违纪检讨书
2014/02/18 职场文书
《长相思》听课反思
2014/04/10 职场文书
职业生涯规划书前言
2014/04/15 职场文书
医院搬迁方案
2014/06/14 职场文书
环卫工人慰问信
2015/02/15 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书