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 相关文章推荐
解读IE和firefox下JScript和HREF的执行顺序
Jan 12 Javascript
JavaScript传递变量: 值传递?引用传递?
Feb 22 Javascript
Javascript base64编码实现代码
Dec 02 Javascript
构造函数+原型模式构造js自定义对象(最通用)
May 12 Javascript
table insertRow、deleteRow定义和用法总结
May 14 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
js实现一键复制功能
Mar 16 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 Javascript
vue实现计算器功能
Feb 22 Javascript
js 闭包深入理解与实例分析
Mar 19 Javascript
vue实现从外部修改组件内部的变量的值
Jul 30 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初学者(入门学习经验谈)
2010/10/12 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
ThinkPHP中create()方法自动验证实例
2017/04/26 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
理解JS绑定事件
2016/01/19 Javascript
详解ECharts使用心得总结
2016/12/06 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
win系统下nodejs环境安装配置
2017/05/04 NodeJs
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
微信小程序实现音乐播放器
2019/11/20 Javascript
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
[50:11]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第三场
2018/04/09 DOTA
python实现逆波兰计算表达式实例详解
2015/05/06 Python
Python递归函数定义与用法示例
2017/06/02 Python
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
python读写文件write和flush的实现方式
2020/02/21 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
省优秀教师事迹材料
2014/01/30 职场文书
设计师个人求职信范文
2014/02/02 职场文书
上班离岗检讨书
2014/09/10 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
亮剑观后感300字
2015/06/05 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
Python3中最常用的5种线程锁实例总结
2021/07/07 Python
Python使用pyecharts控件绘制图表
2022/06/05 Python