JavaScript对象的浅拷贝与深拷贝实例分析


Posted in Javascript onJuly 25, 2018

本文实例讲述了JavaScript对象的浅拷贝和深拷贝。分享给大家供大家参考,具体如下:

1、浅拷贝

仅仅复制对象的引用,而不是对象本身。

var person = {
  name: 'Alice',
  friends: ['Bruce', 'Cindy']
}
var student = {
  id: 30
}
student = simpleClone(person, student);
student.friends.push('David');
alert(person.friends);
function simpleClone(oldObj, newObj) {
  var newObj = newObj || {};
  for (var i in oldObj)
    newObj[i] = oldObj[i];
  return newObj;
}

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun,测试运行结果:

JavaScript对象的浅拷贝与深拷贝实例分析

给子对象的数组类型的属性添加一个新值,父对象的该属性值也被篡改。

2、深拷贝

把复制的对象所引用的全部对象都复制一遍,能够实现真正意义上的数组和对象的拷贝。

浅拷贝的问题:如果父对象的属性值为一个数组或另一个对象,那么实际上子对象获得的只是一个内存地址,而不是对父对象的真正拷贝,因此存在父对象被篡改的可能。

解决方法:使用深拷贝。

var person = {
  name: 'Alice',
  friends: ['Bruce', 'Cindy']
}
var student = {
  id: 30
}
student = deepClone(person, student);
student.friends.push('David');
alert(person.friends); // 'Bruce', 'Cindy'
function deepClone(oldObj, newObj) {
  var newObj = newObj || {};
  newObj = JSON.parse(JSON.stringify(oldObj));
  return newObj;
}

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun,测试运行结果:

JavaScript对象的浅拷贝与深拷贝实例分析

3、实现深拷贝的方法

1) 方法1:使用JSON.parse()方法

function deepClone(oldObj, newObj) {
  var newObj = newObj || {};
  newObj = JSON.parse(JSON.stringify(oldObj));
  return newObj;
}

优点:

简单易用。

缺点:

① 会抛弃对象的constructor,即,深拷贝后,不管该对象原来的构造函数是什么,在深拷贝之后都会变成Object。

② 能正确处理的对象只有 Number, String, Boolean, Array,即那些能够被JSON直接表示的数据结构,RegExp对象等无法通过这种方式深拷贝。

2) 方法2:递归拷贝

function deepClone(oldObj, newObj) {
  var newObj = newObj || {};
  for (var i in oldObj) {
    if (typeof oldObj[i] === 'object') {
      newObj[i] = (oldObj[i].constructor === Array) ? [] : {};
      arguments.callee(oldObj[i], newObj[i]);
    }
    else
      newObj[i] = oldObj[i];
  }
  return newObj;
}

问题:当遇到两个互相引用的对象,会出现死循环的情况。

解决方法:在遍历时判断两个对象是否相互引用(如oldObj.property === newObj),如果是则退出循环。

function deepClone(oldObj, newObj) {
  var newObj = newObj || {};
  for (var i in oldObj) {
    var prop = oldObj[i];
    if (prop === newObj)
          continue;
    if (typeof prop === 'object') {
      newObj[i] = (prop.constructor === Array) ? [] : {};
      arguments.callee(prop, newObj[i]);
    }
    else
      newObj[i] = prop;
  }
  return newObj;
}

3) 方法3:使用Object.create()方法

function deepClone(oldObj, newObj) {
  var newObj = newObj || {};
  for (var i in oldObj) {
    var prop = oldObj[i];
    if (prop === newObj)
          continue;
    if (typeof prop === 'object')
      newObj[i] = (prop.constructor === Array) ? [] : Object.create(prop);
    else
      newObj[i] = prop;
  }
  return newObj;
}

4)方法4:使用jQuery.extend()jQuery.fn.extend()

请见:https://3water.com/article/144424.htm

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript静态的url如何传递
May 03 Javascript
List Information About the Binary Files Used by an Application
Jun 18 Javascript
Jquery 设置标题的自动翻转
Oct 03 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
Apr 14 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
Sep 14 Javascript
jquery cookie实现的简单换肤功能适合小网站
Aug 25 Javascript
javascript中bind函数的作用实例介绍
Sep 28 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
jquery.form.js异步提交表单详解
Apr 25 jQuery
详解在AngularJS的controller外部直接获取$scope
Jun 02 Javascript
JavaScript数组去重的多种方法(四种)
Sep 19 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 #Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 #jQuery
详解Vue源码学习之callHook钩子函数
Jul 25 #Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 #Javascript
浅析JS中回调函数及用法
Jul 25 #Javascript
详解使用mpvue开发github小程序总结
Jul 25 #Javascript
详解mpvue开发小程序小总结
Jul 25 #Javascript
You might like
Smarty+QUICKFORM小小演示
2007/02/25 PHP
php对gzip文件或者字符串解压实例参考
2008/07/25 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
简单谈谈php浮点数精确运算
2016/03/10 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
IE8提示Invalid procedure call or argument 异常的解决方法
2012/09/30 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
利用JS制作万年历的方法
2017/08/16 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
React实现类似淘宝tab居中切换效果的示例代码
2020/06/02 Javascript
Python中的index()方法使用教程
2015/05/18 Python
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
使用python的pandas库读取csv文件保存至mysql数据库
2018/08/20 Python
python TF-IDF算法实现文本关键词提取
2019/05/29 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
python烟花效果的代码实例
2020/02/25 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
Python如何在bool函数中取值
2020/09/21 Python
Python对excel的基本操作方法
2021/02/18 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
Hotels.com印度:酒店预订
2019/05/11 全球购物
Emma Bridgewater官网:英国餐具制造商
2019/11/24 全球购物
纪律教育学习心得体会
2014/09/02 职场文书
医生辞职信范文
2015/03/02 职场文书
自主招生自荐信怎么写
2015/03/24 职场文书
十八大观后感
2015/06/12 职场文书