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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
JavaScript 比较时间大小的代码
Apr 24 Javascript
通过正则表达式实现表单验证是否为中文
Feb 18 Javascript
JavaScript常用脚本汇总(一)
Mar 04 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
Jul 27 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
原生JS发送异步数据请求
Jun 08 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
Oct 26 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
超简单的微信小程序轮播图
Nov 22 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
一个简单实现多条件查询的例子
2006/10/09 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
原生js实现鼠标跟随效果
2017/02/28 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
微信小程序 如何获取网络状态
2019/07/26 Javascript
javascript实现画板功能
2020/04/12 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
Python迭代器和生成器介绍
2015/03/06 Python
Python中的模块和包概念介绍
2015/04/13 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
对python多线程与global变量详解
2018/11/09 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
Python安装并操作redis实现流程详解
2020/10/13 Python
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
咨询公司各岗位职责
2013/12/02 职场文书
花店创业计划书范文
2014/02/07 职场文书
营运督导岗位职责
2015/04/10 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
治庸问责工作总结
2015/08/11 职场文书
2016年教代会开幕词
2016/03/04 职场文书
Python基础之数据结构详解
2021/04/28 Python
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技