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学习笔记(五)正则表达式
Apr 08 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 Javascript
利用js实现选项卡的特别效果的实例
Mar 03 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
IE8中动态创建script标签onload无效的解决方法
Dec 22 Javascript
jQuery中wrapAll()方法用法实例
Jan 16 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
Nov 02 Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 Javascript
使用javascript做在线算法编程
May 25 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
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
php下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
如何使用php输出时间格式
2013/08/31 PHP
标准PHP的AES加密算法类
2015/03/12 PHP
php简单实现快速排序的方法
2015/04/04 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
nodeJs爬虫获取数据简单实现代码
2016/03/29 NodeJs
JavaScript中cookie工具函数封装的示例代码
2016/10/11 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
基于python的汉字转GBK码实现代码
2012/02/19 Python
Tensorflow加载预训练模型和保存模型的实例
2018/07/27 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
师范大学应届生求职信
2013/11/21 职场文书
最经典的大学生职业生涯规划范文
2014/03/05 职场文书
大学学生会竞选演讲稿
2014/04/25 职场文书
2014年计生工作总结
2014/11/21 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
新手入门Mysql--概念
2021/06/18 MySQL
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技