JS对象深度克隆实例分析


Posted in Javascript onMarch 16, 2017

本文实例讲述了JS对象深度克隆。分享给大家供大家参考,具体如下:

首先看一个例子:

var student = {
  name:"yxz",
  age:25
}
var newStudent = student;
newStudent.sex = "male";
console.log(student); //{name:"yxz",age:25,sex:"male"}

由此可见,将一个对象通过简单的传递赋值传递给一个新的变量时,仅仅是给该对象增添了一个别名。所以,对该别名的操作也会作用到原对象上去,所以通过newStudent.sex给对象student添加属性可以实现。然而,更多的时候我们希望newStudent和student对象是独立的,那么就需要生成一个原对象的副本,请看下面的例子:

var cloneObj = function(obj){
  var str, newobj = obj.constructor === Array ? [] : {};
  if(typeof obj !== 'object'){
    return;
  } else if(window.JSON){
    str = JSON.stringify(obj), //序列化对象
    newobj = JSON.parse(str); //还原
  } else {
    for(var i in obj){
      newobj[i] = typeof obj[i] === 'object' ? cloneObj(obj[i]) : obj[i]; 
    }
  }
  return newobj;
};
//测试
var student = {
  name:"yxz",
  age:25,
  sex:"male"
};
//执行深度克隆
var newStudent = cloneObj(student);
delete newStudent.sex;
console.log(newStudent); //{name:"yxz",age:25}
console.log(student); //{name:"yxz",age:25,sex:"male"}

通过执行结果可以看出newStudent已经成为了一个克隆出来的副本,对newStudent的任何操作将不再影响student对象。

备注:JSON.stringify和parse分别为JSON对象的序列化和反序列化函数,即分别负责将对象序列化成字符串和将json字符串反序列化成对象,因为这个是属于ECMAScript5规范,所以上面程序标注部分做了一个兼容处理。

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

Javascript 相关文章推荐
javascript实现滑动解锁功能
Dec 31 Javascript
jQuery插件windowScroll实现单屏滚动特效
Jul 14 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
详解JavaScript对象序列化
Jan 19 Javascript
基于javascript实现最简单的选项卡切换效果
May 16 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
jQuery获取Table某列的值(推荐)
Mar 03 Javascript
AngularJS页面传参的5种方式
Apr 01 Javascript
layui实现根据table数据判断按钮显示情况的方法
Sep 26 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 Javascript
解决Element中el-date-picker组件不回填的情况
Nov 07 Javascript
JS异步加载的三种实现方式
Mar 16 #Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 #Javascript
基于JavaScript实现滑动门效果
Mar 16 #Javascript
基于Vue2.0的分页组件
Mar 16 #Javascript
原生js实现验证码功能
Mar 16 #Javascript
基于vue实现多引擎搜索及关键字提示
Mar 16 #Javascript
vue图片加载与显示默认图片实例代码
Mar 16 #Javascript
You might like
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
php之字符串变相相减的代码
2007/03/19 PHP
解析link_mysql的php版
2013/06/30 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
javascript面向对象之Javascript 继承
2010/05/04 Javascript
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
理解 JavaScript Scoping & Hoisting(二)
2015/11/18 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
vue better-scroll插件使用详解
2018/01/25 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
举例讲解Python中的算数运算符的用法
2015/05/13 Python
Python文件的读写和异常代码示例
2017/10/31 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
学校招生宣传广告词
2014/03/19 职场文书