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 相关文章推荐
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 Javascript
js实现纯前端的图片预览
Apr 27 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 Javascript
vue系列之requireJs中引入vue-router的方法
Jul 18 Javascript
vue实现重置表单信息为空的方法
Sep 29 Javascript
js核心基础之闭包的应用实例分析
May 11 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 Javascript
JsonProperty 的使用方法详解
Oct 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 设计模式之观察者模式介绍
2012/02/22 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
[原创]smarty简单模板变量输出方法
2016/07/09 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
移动端图片上传旋转、压缩问题的方法
2018/10/16 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
Python字符串详细介绍
2015/05/09 Python
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
django 自定义过滤器的实现
2019/02/26 Python
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
SQL Server 2000数据库的文件有哪些,分别进行描述
2013/03/30 面试题
王老吉广告词
2014/03/20 职场文书
公司法人授权委托书范本
2014/09/12 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js