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 相关文章推荐
JS input 数字验证代码
Jul 30 Javascript
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
前后台交互过程中json格式如何解析以及如何生成
Dec 26 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
JavaScript判断变量是否为数组的方法(Array)
Feb 24 Javascript
简单讲解AngularJS的Routing路由的定义与使用
Mar 05 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
理解javascript async的用法
Aug 22 Javascript
vue router demo详解
Oct 13 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 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
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
php xml常用函数的集合(比较详细)
2013/06/06 PHP
PHP中的按位与和按位或操作示例
2014/01/27 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
Electron 如何调用本地模块的方法
2019/02/01 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
2019/04/09 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
2020/03/10 Javascript
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
Python实现简单遗传算法(SGA)
2018/01/29 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
详解python中的hashlib模块的使用
2019/04/22 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
django云端留言板实例详解
2019/07/22 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
公司领导推荐信
2013/11/12 职场文书
行政部经理助理岗位职责
2014/06/15 职场文书
安全教育培训制度
2015/08/06 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
go类型转换及与C的类型转换方式
2021/05/05 Golang
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis
SQLServer之常用函数总结详解
2021/08/30 SQL Server
vue @click.native 绑定原生点击事件
2022/04/22 Vue.js