js浅度克隆/深度克隆
首先弄明白几个概念:
一. 具体数据类型分为两种:
1.原始数据类型
2.引用数据类型
原始数据类型存储的是对象的实际地址,包括:
number、string、boolean、还有两个特殊的null、undefined
引用数据类型其中存储的是对象的引用地址, 包括:.
array、function、object
二. 浅度克隆:
原始类型为值传递,对象类型仍为引用传递; 也就是说对象类型克隆的是引用地址,引用地址指向的是同一个数据空间,
这时候改变克隆出来的数据,被克隆的数据也会变化,因为引用对象是一样的,所以数据也是一样的,改变新对象的时候 原数据也受影响。
三. 深度克隆:
所有元素或属性均完全复制,与原对象完全脱离,也就是说所有对于新对象的修改都不会反映到原对象中。
具体看如下代码:
var a = 1;
var b = a;
a = 10;
console.log(b); console.log(a);// 1,10 var a = 'hello';
var b = a;
a = 'world';
console.log(b); console.log(a);// hello,world var a = true;
var b = a;
a = false;
console.log(b); console.log(a);// true,false
这些都是元数据类型,克隆出来的数据跟原数据是没有关系了,新数据的改变不会影响原数据。
看下面的代码:
var a = [0, 1, 2, 3];
var b = a;
b.push(4);
console.log(a); // [0, 1, 2, 3, 4]
b 是 a 的克隆对象, [0,1,2,3]是数组,属于引用数据类型,所以 a 存储的是这个数组的引用地址。b 浅克隆 a ,所以 b 跟 a 是同一个引用地址,这样对 b 的操作 也会影响 原数据。
解决这种问题的方法便是 使用深度克隆:
function clone(obj){
var buf;
if(obj instanceof Array){
buf = [];
var i = obj.length;
while(i--){
buf[i] = clone(obj[i]);
}
return buf;
}
else if(obj instanceof Object){
buf = {};
for(var k in obj){
buf[k] = clone(obj[k]);
}
return buf;
}
else{
return obj;
}
}
更简洁的写法如下:
function clone(obj) {
var o = obj instanceof Array ? [] : {};
for(var k in obj)
o[k] = typeof obj[k] === Object ? clone(obj[k]) : obj[k];
return o;
}
var a = [[1, 2, 3], [4, 5, 6, 7]];
var b = clone(a);
console.log(b);
在平时的开发中,我一般都使用 JSON.parse(JSON.stringify( obj )) ;
但是这种方法有个问题,比如
var a={'a':function(){},"b":111,"c":undefined}
var b=JSON.parse(JSON.stringify(a));
console.log(b);// {b: 111}
就是说 会过滤掉value值 是function undefine 的属性,使用的时候需要注意。
js浅度克隆/深度克隆的更多相关文章
- js对象的深度克隆
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js里的深度克隆
ES6 数组克隆 let arr = [1,2,3,4,5]; let arr1 = [...a]; arr1 = ["a","b","c" ...
- 【JavaScript代码实现三】JS对象的深度克隆
function clone(Obj) { var buf; if (Obj instanceof Array) { buf = []; // 创建一个空的数组 var i = Obj.length; ...
- js之深度克隆、简易克隆
一.js中的对象 谈到对象的克隆,必定要说一下对象的概念. js中的数据类型分为两大类:原始类型和对象类型. (1)原始类型包括:数值.字符串.布尔值.null.undefined(后两个是特殊的原始 ...
- JS的深度克隆,利用构造函数原型深度克隆
我爱撸码,撸码使我感到快乐!大家好,我是Counter.今天来写写,JS中的深度克隆,这个在笔面试中,考的还是比较多的,主要是对象与数组的赋值,如果直接赋值的话,那么得到的是对象或者数组在堆里的地址, ...
- js实现数组、对象深度克隆的两种办法
1.深度克隆的原理 JS中的深度克隆,指的是原对象改变了,克隆出来的新对象也不会改变,原对象与新对象是完全独立的关系. 实现深度克隆的原理得从对象是一种引用类型说起 众所周知,对象是一种引用类型,对象 ...
- javascript中对象的深度克隆
记录一个常见的面试题,javascript中对象的深度克隆,转载自:http://www.2cto.com/kf/201409/332955.html 今天就聊一下一个常见的笔试.面试题,js中对象的 ...
- javascript对象的深度克隆
在做项目的时候需要向对象里面添加新属性,又不想修改原对象.于是就写: var newObj = oldObj,但是新对象属性改变后就对象也会跟着改变,这是因为无论是新对象还是旧对象,指向的内存地址都是 ...
- Java的深度克隆和浅度克隆
说到克隆,其实是个比较简单的概念,跟现实生活正的克隆一样,复制一个一模一样的对象出来.clone()这个方法是从Object继承下来的,一个对象要实现克隆,需要实现一个叫做Cloneable的接口,这 ...
随机推荐
- 利用mkfs.ubifs和ubinize两个工具制作UBI镜像
转:http://blog.sina.com.cn/s/blog_9452251d01015z9h.html 有了mkfs.ubifs和ubinize两个工具后,就可以制作UBIFS镜像了,具体步骤如 ...
- [Android Traffic] 让android应用在传输网络数据的时候更省电
到今年6月,我国的手机网民已经达到了3.88亿,超过了电脑终端.相信有智能机的同学都用过手机上网冲浪.但是手机的电量很快被用光了恐怕是每个人都不能忍受的一件事情.而打开数据连接进行网络数据的传输是很耗 ...
- 设计模式之外观模式(PHP实现)
github地址:https://github.com/ZQCard/design_pattern/** * 外观模式(Facade Pattern)隐藏系统的复杂性,并向客户端提供了一个客户端可以访 ...
- python里的“__all__ ”作用
转载:http://python-china.org/t/725 参考:http://www.cnblogs.com/alamZ/p/6943869.html 用 __all__ 暴露接口,这是一种约 ...
- 摄像头bug查找工作总结
近期花了很长时间在libcamera中查找和解决一个bug.下面将这段时间中的工作过程,以及对camera的认识总结如下: 首先是问题的发生,在UM2801中,摄像头的代码已经基本实现,并且相应功能也 ...
- css 文字超出省略号
white-space:nowrap; overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis; 语法: text-ove ...
- 怎样允许其他电脑连接本机MySQL
2017-04-20 1.***\bin\>MySQL -h localhost -u root -p 这样应该可以进入MySQL服务器 执行代码如下: MySQL>use mysql ...
- 通过脚本发送zabbix邮件报警
zabbix原生的报警媒介类型中,邮件报警是我们常用的方式.当我们在CentOS6上面安装zabbix3.0并配置邮件报警的时候,在邮件配置正确的前提下,不管触发器如何触发,邮件总是发送不出去,但是在 ...
- 2017.6.29 java读取.properties配置文件的几种方法
参考来自:http://www.cnblogs.com/s3189454231s/p/5626557.html 关于路径的解释:http://blog.csdn.net/bluishglc/artic ...
- Redis缓存清理
Redis缓存清理 学习了:https://www.cnblogs.com/ZnCl/p/7116870.html 使用 redis-cli.exe登录, 使用flushall 命令: 或者key * ...