博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS里深拷贝和浅拷贝的释义
阅读量:6257 次
发布时间:2019-06-22

本文共 1567 字,大约阅读时间需要 5 分钟。

本文解释javascript中深拷贝和浅拷贝的区别。

浅拷贝/Shallow Copy

浅拷贝指拷贝了引用值。

var original = {"prop1" : "Prop1", "prop2" : "prop2"};console.log(JSON.stringify(original));// {"prop1" : "Prop1", "prop2" : "prop2"}var shallowCopy = original;console.log(JSON.stringify(shallowCopy));// {"prop1" : "Prop1", "prop2" : "prop2"}shallowCopy.prop1 = "ChangedProp1";console.log(JSON.stringify(original));// {"prop1" : "ChangedProp1", "prop2" : "prop2"}console.log(JSON.stringify(shallowCopy));// {"prop1" : "ChangedProp1", "prop2" : "prop2"}

clipboard.png

注意:

  • 浅拷贝中,原始值和副本共享同样的属性。
  • 浅拷贝只拷贝了对象引用。
  • 浅拷贝中如果修改了拷贝对象会影响到原始对象,反之亦然。
  • js中,数组和对象的赋值默认为浅拷贝。

深拷贝/Deep Copy

深拷贝指递归的复制对象的属性给新对象。jquery中我们使用$.extend去进行深拷贝。

$.extend(deepCopy, target, object1, [objectN] )

第一个参数传入true,指明此为深拷贝,target为目标对象,object1,原对象。

var original = {"prop1" : "Prop1", "prop2" : "prop2"};console.log(JSON.stringify(original));// {"prop1" : "Prop1", "prop2" : "prop2"}var deepCopy = $.extend(true, {}, original);console.log(JSON.stringify(deepCopy));// {"prop1" : "Prop1", "prop2" : "prop2"}deepCopy.prop1 = "ChangedProp1";console.log(JSON.stringify(original));// {"prop1" : "Prop1", "prop2" : "prop2"}console.log(JSON.stringify(deepCopy));// {"prop1" : "ChangedProp1", "prop2" : "prop2"}

clipboard.png

注意:

  • 深拷贝中,副本和原对象不共享属性
  • 深拷贝递归的复制属性
  • 深拷贝的副本不会影响到原对象,反之亦然
  • js中所有的原始数据类型默认执行深拷贝,比如Boolean, null, Undefined, Number,String等

译者注:

  • 实际工作中,通常所谓clone一个对象一般都是指深拷贝,即拷贝一个对象的副本。
  • 有些时候一层的深拷贝被认为是浅拷贝,比如shallowCopy({a:1,b:{hello:'world}}),b的值是一个对象,浅拷贝出来的新对象直接引用了原对象的value对象,所以也会相互影响的。
  • 实际工作中,深拷贝(递归的对对象里每一层值和对象进行拷贝)应用很广泛,我认为浅拷贝只变成了一种概念,因为每一个需要clone的地方都是深拷贝。
  • 复制一个副本对象也可以通过工厂函数,比如vuejs里的data。

转载地址:http://naxsa.baihongyu.com/

你可能感兴趣的文章
python 调用aiohttp
查看>>
Spring Boot中使用MyBatis注解配置详解
查看>>
linux下文件的一些文件颜色的含义
查看>>
跨域iframe高度自适应(兼容IE/FF/OP/Chrome)
查看>>
如何花更少的时间学习更多的知识
查看>>
学习鸟哥的Linux私房菜笔记(8)——文件查找与文件管理2
查看>>
升级fedora 18到fedora 19
查看>>
【代码小记】无
查看>>
BarTender 2016表单中的“秤显示”控件
查看>>
11月20日学习内容整理:jquery插件
查看>>
Redis客户端集群
查看>>
javascript基础篇:函数
查看>>
SVN与TortoiseSVN实战:补丁详解
查看>>
java一些面试题
查看>>
干货型up主
查看>>
获取页面中所有dropdownlist类型控件
查看>>
读《淘宝数据魔方技术架构解析》有感
查看>>
[转载]如何破解Excel VBA密码
查看>>
【BZOJ】2563: 阿狸和桃子的游戏
查看>>
redis 中文字符显示
查看>>