如何实现JavaScript的深拷贝
2018-06-24 02:14:22来源:未知 阅读 ()
在JavaScript中,对于引用类型来说,想要实现对一个对象的修改而不改变原来本身的对象,就需要对对象就行拷贝,拷贝分为深浅拷贝,如果一个对象或者一个数组中的value都是基本类型的话,那么通过浅拷贝就可以将一个对象复制,并且修改属性不会影响原来的对象,js中基本类型包括5种,分别是 String,Number,Boolean,Null,Undefined五种类型,也就是说如果你的引用类型中只有这5种类型的话,那么你只需要通过浅拷贝就可以实现。
var newobj = Object.assign({},obj);
但是对于一些复杂的类型,仅仅通过Object.assign来说就显得不是那么够了。ok,这里有两种方式可以实现,第一种,我们可以通过自己实现的一个deepclone来实现深拷贝
function deepclone(obj) { let newobj = Array.isArray(obj) ? [] : {}; //在这里判断传入的类型然后初始化一个空的对象或数组 for(let key in obj){ let type = Object.prototype.toString.call(obj[key]);//判断对象属性的类型,如果为引用类型递归处理 if( type === '[object Array]' || type === '[object Object]'){ newobj[key] = deepclone(obj[key]); } else{ newobj[key] = obj[key]; } } return newobj; }
通过这种方法我们就实现了一个对象的深拷贝,下面是测试的结果
var test = { score: [1,[3,4,5],3], name: 'petter', skill: { run: function () { console.log('I can run fast'); } } } var mytest = deepclone(test); mytest.name = 'jenny'; console.log('Myname is ' + test.name); mytest.score[1].push(4); console.log(mytest.score); console.log(test.score); mytest.skill.run = function () { console.log('I can\'t run fast'); } test.skill.run(); mytest.skill.run(); { score: [ 1, [ 3, 4, 5 ], 3 ], name: 'petter', skill: { run: [Function: run] } } Myname is petter [ 1, [ 3, 4, 5, 4 ], 3 ] [ 1, [ 3, 4, 5 ], 3 ] I can run fast I can't run fast
还有一种深拷贝的实现方法是通过json,当然这有点黑科技了
var newobj = JSON.parse(JSON.stringify(obj));
这种方法的缺点是对象的方法会丢失,因为对于JSON格式的数据来说是不应该有function的,所以在JSON.stringify中会帮我们将这些方法给滤掉,也就会造成丢失。
所以使用时应该多加小心。
ok,今天的总结就到这。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:js 表格合并单元格
- javascript面向对象入门基础详细介绍 2020-03-29
- js防止表单重复提交实现代码 2020-03-29
- 基于JQuery的多标签实现代码 2020-03-29
- js实现翻页后保持checkbox选中状态的实现方法 2020-03-25
- JavaScript函数表达式详解及实例 2020-03-25
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash