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;
5 } else if(window.JSON){
6 str = JSON.stringify(obj), //序列化对象
7 newobj = JSON.parse(str); //还原
8 } else {
9 for(var i in obj){
10 newobj[i] = typeof obj[i] === 'object' ? cloneObj(obj[i]) : obj[i];
11 }
12 }
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规范,所以上面程序红色部分做了一个兼容处理。
JS对象深度克隆的更多相关文章
- js实现数组、对象深度克隆的两种办法
1.深度克隆的原理 JS中的深度克隆,指的是原对象改变了,克隆出来的新对象也不会改变,原对象与新对象是完全独立的关系. 实现深度克隆的原理得从对象是一种引用类型说起 众所周知,对象是一种引用类型,对象 ...
- JS的深度克隆,利用构造函数原型深度克隆
我爱撸码,撸码使我感到快乐!大家好,我是Counter.今天来写写,JS中的深度克隆,这个在笔面试中,考的还是比较多的,主要是对象与数组的赋值,如果直接赋值的话,那么得到的是对象或者数组在堆里的地址, ...
- js之深度克隆、简易克隆
一.js中的对象 谈到对象的克隆,必定要说一下对象的概念. js中的数据类型分为两大类:原始类型和对象类型. (1)原始类型包括:数值.字符串.布尔值.null.undefined(后两个是特殊的原始 ...
- java对象 深度克隆(不实现Cloneable接口)和浅度克隆
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt128 为什么需要克隆: 在实际编程过程中,我们常常要遇到这种情况:有一个对象 ...
- C#对象深度克隆
有基础的开发者都应该很明白,对象是一个引用类型,例如: object b=new object(); object a=b; 那么a指向的是b的地址,这样在有些时候就会造成如果修改a的值,那么b的值也 ...
- 原生js实现深度克隆
总体思路: 判断对象当中的值为引用值还是原始值 如果是引用值,判断是数组还是对象,如果是原始值直接copy 递归 注意:不要忘了排除null,因为typeof null = 'object' func ...
- js如何深度克隆
var json = {a:6,b:4,c:[1,2,3]}; var json2 = clone(json); function clone(obj){ var oNew = new obj.con ...
- JavaScript对象之深度克隆
也不知道从什么时候开始,前端圈冒出了个新词:对象深度克隆.看起来好像很高大上的样子,实际上并不新鲜,在我们的实际项目开发中,你可能早已用到,只不过由于汉字的博大精深,有些原本很简单的事物被一些看似专业 ...
- JavaScript实现对象的深度克隆及typeof和instanceof【简洁】【分享】
JavaScript实现对象的深度克隆 代码实现如下: <!DOCTYPE html> <html lang="en"> <head> < ...
随机推荐
- 201521123016 《Java程序设计》第8周学习总结
1. 本周学习总结 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结 1.删除元素的时候从最后一个元素开始,避免删除元素后位置发生变化而导致有些元素没有删 ...
- 201521123092《java程序设计》第五周学习总结
1.本周学习总结 #1.1 尝试使用思维导图总结有关多态与接口的知识点. 2.书面作业 #1.代码阅读:Child压缩包内源代码##1.1 com.parent包中Child.java文件能否编译通过 ...
- 201521044091《java程序设计》第四次总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.11.2 使用常规方法总结其他上课内容 Object是所有对象类的父类,而toString方法只有可以转换为字符串的类型对象才可 ...
- 201521123035《Java程序设计》第十一周作业
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 本周对多线程的冲突是从多线程的冲突开始讲起,从而提出互斥共享与互斥访问.其中,互斥访问提到了synchronize ...
- Java 第十周总结
1. 本周学习总结 2. 书面作业 1.finally (题目4-2) 1.1 截图你的提交结果(出现学号) 1.2 4-2中finally中捕获异常需要注意什么? finally创建一个代码块.该代 ...
- 201521123009《Java程序设计》第14周学习总结
1. 本周学习总结 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名) 在自己建立的数据库上执行常见SQL语句(截图) - ...
- 201521123085《Java程序设计》第10周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 finally 题目4-2 1.1 截图你的提交结果(出现学 ...
- 微信小程序中发送模版消息注意事项
在微信小程序中发送模版消息 参考微信公众平台Api文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/notice.html#模版消息管理 此参考地址 ...
- python日记_01 python实现6个人围成一圈,扔到第三个人出局,循环扔的问题。
#!/usr/bin/python shoplist=['mango','apple','carrot','banana','oracle','python'] length = len(shopli ...
- SpringMVC第四篇【参数绑定详讲、默认支持参数类型、自定义参数绑定、RequestParam注解】
参数绑定 我们在Controller使用方法参数接收值,就是把web端的值给接收到Controller中处理,这个过程就叫做参数绑定- 默认支持的参数类型 从上面的用法我们可以发现,我们可以使用req ...