如何实现数组的深拷贝和浅拷贝

如何实现数组的深拷贝和浅拷贝 目录

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

转载于:https://juejin.im/post/5ae6b9f36fb9a07acb3ca525