符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
这篇文章给大家分享的是有关javascript中深拷贝与浅拷贝的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
创新互联建站是一家专业从事做网站、成都网站制作、网页设计的品牌网络公司。如今是成都地区具影响力的网站设计公司,作为专业的成都网站建设公司,创新互联建站依托强大的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、营销型网站建设及网站设计开发服务!
深拷贝和浅拷贝是大家经常听到的两个名词,两者到底有什么不同呢?
先看看什么是浅拷贝。
var obj1 = { a: 1, b: 2 }; var obj2 = obj1; obj2.a = 3; console.log(obj1); // { a: 3, b: 2 } console.log(obj2); // { a: 3, b: 2 }
这是一个最简单的浅拷贝的例子,我把obj1赋值给obj2,改变了obj2中的一个属性值,obj1中的相应属性值也跟着变化了,这是为什么呢?
因为浅拷贝其实只是引用的拷贝,两者还是指向内存中的同一个地址。简而言之,就是obj1和obj2其实指向的是同一个对象。打个比方,就像一个房间把门牌号1换成了门牌号2,但是这个房间还是这个房间。
那深拷贝就是两者指向不同的内存地址,是真正意义上的拷贝。拿上面的房间举例子,就是你真的重新开了一间房,并不是只是换门牌号。
Object.assign()是我们经常用到的方法,其实这个方法就是浅拷贝。但是它又有一点特殊的地方,就是可以处理第一层的深拷贝。
var obj1 = { a: 1, b: { c: 2 } }; var obj2 = Object.assign({}, obj1); obj2.a = 3; obj2.b.c = 3; console.log(obj1); // { a: 1, b: { c: 3 } } console.log(obj2); // { a: 3, b: { c: 3 } }
看上面的例子,属性a的值并没有跟着变,但是属性b中的c的值跟着变了。
这是最常用的实现深拷贝的方式,直接看例子:
var obj1 = { a: { b: 1 } }; var obj2 = JSON.parse(JSON.stringify(obj1));
这种方法很简单而且好用,但是有一点点瑕疵,它会抛弃对象的constructor。也就是深拷贝之后,不管这个对象原来的构造函数是什么,在深拷贝之后都会变成Object。
而且这种方法能正确处理的对象只有 Number, String, Boolean, Array,即那些能够被JSON直接表示的数据结构。RegExp对象或者function是无法通过这种方式深拷贝。
这是我个人目前使用的方法,只需要一行var obj2 = _.cloneDeep(obj1)
就能实现。而且lodash是一个功能很强大的库,提供的方法可靠又简单,
感谢各位的阅读!关于“javascript中深拷贝与浅拷贝的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!