js的深层克隆和浅层克隆代码和理解
<script>
//判断是不是原始值
//判断是数组还是对象
//建立相应的数组或对象
var obj={
name:'辣鸡',
sex:'male',
card:['laobi','feiwu'],
wife:{
name:'智障',
son:{
name:'彩笔'
}
}
}
var obj1={}
function deepClone(Origin,Target){
var Target=Target ||{},
toStr = Object.prototype.toString,
arrStr = '[object Array]';
for(var prop in Origin){
//第一步,判断对象是不是原始值
if(Origin.hasOwnProperty(prop)){
if(typeof(Origin[prop])=='object'){
if(toStr.call(Origin[prop]) == arrStr){
Target[prop]=[];
}else{
Target[prop] = {};
}
deepClone(Origin[prop],Target[prop]);
}
else{
Target[prop] = Origin[prop];
}
}
}
}
</script>
深层克隆
注意:判断是否是原型的方法,要首先想到for in 和hasProperty的方法,然后再用typeof(Origin[prop]) =='object',
判断数组和对象的方法,则有三种,constructor ,toString call ,instanceof
此处用的是toString.call(Origin[prop]=='arrStr'),其实就是判断是否是[object Array]
最后递归则用回调deepClone()方法,建立相应数组和对象
下面是通过三目运算符完善代码,并且加了判断方法不为空,还有加了返回值Target
function deepClone(Origin,Target){
var Target=Target ||{},
toStr = Object.prototype.toString,
arrStr = '[object Array]';
for(var prop in Origin){
//第一步,判断对象是不是原始值
if(Origin.hasOwnProperty(prop)){
if(typeof(Origin[prop])=='object' && Origin[prop] !=='null'){
target[prop] = toStr.call(Origin[prop]) == arrStr ?[]: {};
deepClone(Origin[prop],Target[prop]);
}
else{
Target[prop] = Origin[prop];
}
}
}
return Target;
}
浅层克隆
var obj3={
name:'abc',
sex:'boy',
height:178}
var obj4={} function clone(Origin,Target){
var Target = Target||{};//防止用户不传Target
for ( prop in Origin){
Target[prop]=Origin[prop]
}
return Target;
}
clone(obj3,obj4)
需要注意的是,如果修改Origin的值,则不会改变Target的值
但是如果obj3里面有数组属性,调用方法改变obj4的数组属性时,也会改变obj3,因为是引用属性:
js的深层克隆和浅层克隆代码和理解的更多相关文章
- java中浅层克隆和深层克隆
1.浅复制与深复制概念 浅复制(浅克隆) 被复制对象的所有变量都含有与原来的对象相同的值,而所有的对其他对象的引用仍然指向原来的对象.换言之,浅复制仅仅复制所考虑的对象,而不复制它所引用的对象 ...
- c++中深层复制(浅层复制运行错误)成功运行-----sample
下面随笔给出c++中深层复制(浅层复制运行错误)成功运行------sample. 浅层复制与深层复制 浅层复制 实现对象间数据元素的一一对应复制. 深层复制 当被复制的对象数据成员是指针类型时,不是 ...
- Java中的Clone机制(浅层复制)
浅层复制代码: import java.util.*; class Int{ private int i; public Int(int ii){i = ii;} public void increm ...
- java数组对象的浅层复制与深层复制
实际上,java中数组对象的浅层复制只是复制了对象的引用(参考),而深层复制的才是对象所代表的值.
- .net中String是引用类型还是值类型 以及 C#深层拷贝浅层拷贝
http://www.cnblogs.com/yank/archive/2011/10/24/2204145.html http://www.cnblogs.com/zwq194/archive/20 ...
- MLDS笔记:浅层结构 vs 深层结构
深度学习出现之前,机器学习方面的开发者通常需要仔细地设计特征.设计算法,且他们在理论上常能够得知这样设计的实际表现如何: 深度学习出现后,开发者常先尝试实验,有时候实验结果常与直觉相矛盾,实验后再找出 ...
- 深度学习笔记之关于基本思想、浅层学习、Neural Network和训练过程(三)
不多说,直接上干货! 五.Deep Learning的基本思想 假设我们有一个系统S,它有n层(S1,…Sn),它的输入是I,输出是O,形象地表示为: I =>S1=>S2=>….. ...
- js制作带有遮罩弹出层实现登录小窗口
要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...
- struts2.1笔记01:MVC框架思想浅层理解
1. Struts 1是全世界第一个发布的MVC框架: 它由Craig McClanahan在2001年发布,该框架一经推出,就得到了世界上Java Web开发者的拥护,经过长达6年时间的锤炼,S ...
随机推荐
- Mac idea激活
感谢https://blog.csdn.net/HALEN001/article/details/81137092 1.下载IntelliJ IDEA 2018.2.2版本和破解补丁Jetbrains ...
- odoo开发笔记 -- 表名_name长度限制
场景描述: odoo中定义模型的时候,系统会根据参数_name="********" 按照一定的系统规则自动生成表名; 最近开发过程中发现,_name参数的字符长度不能超过64位, ...
- Ajax 提交 数据含特殊字符 出现500错误
Ajax 请求API接口 传输过去的数据 含有特殊字符,Ajax请求失败出现500错误. 假设你要post过去的数据为 :data ==>> {a:'!@!@!@!@#$#{}|> ...
- mysql 开发进阶篇系列 10 锁问题 (相同索引键值或同一行或间隙锁的冲突)
1.使用相同索引键值的冲突 由于mysql 的行锁是针对索引加的锁,不是针对记录加的锁,所以虽然是访问不同行的记录,但如果是使用相同的索引键,是会出现锁冲突的.设计时要注意 例如:city表city_ ...
- Spring系列之DI的原理及手动实现
目录 Spring系列之IOC的原理及手动实现 Spring系列之DI的原理及手动实现 前言 在上一章中,我们介绍和简单实现了容器的部分功能,但是这里还留下了很多的问题.比如我们在构造bean实例的时 ...
- Elasticsearch实践(一):基础入门
本文以 Elasticsearch 6.2.4为例. 注:最新(截止到2018-09-23)的 Elasticsearch 是 6.4.1.5.x系列和6.x系列虽然有些区别,但基本用法是一样的. 官 ...
- MySQL 通讯协议
Client/Server 通讯协议用于客户端链接.代理.主备复制等,支持 SSL.压缩,在链接阶段进行认证,在执行命令时可以支持 Prepared Statements 以及 Stored Proc ...
- 如何在优雅地Spring 中实现消息的发送和消费
本文将对rocktmq-spring-boot的设计实现做一个简单的介绍,读者可以通过本文了解将RocketMQ Client端集成为spring-boot-starter框架的开发细节,然后通过一个 ...
- 基于FineUIMVC的代码生成器(传统三层)v1.0
三层我就不说了,主要是看框架思路可扩展.以前用FineUI开源版写过一版,修修改改自己用了,没有特意的整理,FineUIMVC开发还是比较快,移植了一下两天就弄完了,算是一个对新手有用的工具,先放出第 ...
- 【Go】go get 自动代理
原文链接:https://blog.thinkeridea.com/201903/go/go_get_proxy.html 最近发现技术交流群里很多人在询问 go get 墙外包失败的问题,大家给了很 ...