如何实现数组的深拷贝和浅拷贝
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
1.背景介绍
在使用JavaScript对数组进行操作的时候,我们经常需要将数组进行备份. 如下代码,如果只是简单才用赋值的方法,那么我们只要更改其中的任何一个,然后其他的也会跟着改变,这就导致了问题的发生
var arr1 = ["red","yellow","black"]; var arr2 = arr1; arr2[1] = "green"; console.log("数组的原始值:" + arr1 ); console.log("数组的新值:"
+ arr2);
像上面的这种直接赋值的方式就是数组的浅拷贝,浅拷贝改变其中一个数组,另外一个数组也会跟着改变。很多时候,这不是我们想要的。
2.知识剖析
1.什么是深拷贝和浅拷贝?
浅拷贝:复制一份引用,所有引用对象都指向一份数据,并且都可以修改这份数据。 深拷贝(复杂):复制变量值,对于非基本类型的变量,则递归至基本类型变量后,再复制。可以使用slice和concat方法。
2.slice和concat使用方法
start:必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。 end:可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从
start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。 返回值:返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素(如果 end 未被规定,那么 slice()
方法会选取从 start 到数组结尾的所有元素)。
concat(): concat() 方法用于连接两个或多个数组。 该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。 语法:arrayObject.concat(arrayX,arrayX,......,arrayX) 返回一个新的数组。该数组是通过把所有
arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参 数是数组,那么添加的是数组中的元素,而不是数组。 arrayX:必需。该参数可以是具体的值,也可以是数组对象。可以是任意多个。
3.常见问题
jquery如何实现深拷贝?
4.解决方案
jQuery.extend()
5.编码实战
6.扩展思考
对象的深拷贝 原生js对象的浅拷贝和深拷贝的总结
7.参考文献
参考一:JavaScript数组深拷贝和浅拷贝的两种方法 参考二:原生js对象的浅拷贝和深拷贝的总结
8.更多讨论
深拷贝的应用场景!
鸣谢
感谢大家观看
今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~
技能树.IT修真院
“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。
这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。
快来与我一起学习吧~http://www.jnshu.com/login/1/21109035