如何实现深拷贝和浅拷贝

【JS-4】

如何实现深拷贝与浅拷贝？

大家好，我是IT修真院成都分院第10期学员，一枚正直善良的web程序员。

今天给大家分享一下，修真院官网 JS-04任务中可能会使用到的知识点：

一.背景介绍      

在使用JavaScript对数组进行操作的时候，我们经常需要将数组进行备份.

如下代码，如果只是简单才用赋值的方法，那么我们只要更改其中的任何一个，然后其他的也会跟着改变，这就导致了问题的发生

二.知识剖析

   

1. 什么是深拷贝和浅拷贝?
2. slice和concat使用方法

1.什么是深拷贝和浅拷贝?

浅拷贝：复制一份引用，所有引用对象都指向一份数据，并且都可以修改这份数据。

深拷贝（复杂）：复制变量值，对于非基本类型的变量，则递归至基本类型变量后，再复制。可以使用slice和concat方法。

2.slice和concat使用方法

slice()：

语法：arrayObject.slice(start,end)

slice() 方法可从已有的数组中返回选定的元素（请注意，该方法并不会修改数组，而是返回一个子数组）。

   

start：必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。

end:可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

返回值:返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素（如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素）。

                    
                        <script type="text/javascript">
                            var arr = new Array(3);
                            arr[0] = "George";
                            arr[1] = "John";
                            arr[2] = "Thomas";

                            document.write(arr + "<br />");
                            document.write(arr.slice(1) + "<br />");
                            document.write(arr);
                        </script>George,John,Thomas<br>John,Thomas<br>George,John,Thomas
                    
                

concat()：

concat() 方法用于连接两个或多个数组。 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

语法：arrayObject.concat(arrayX,arrayX,......,arrayX)

返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参 数是数组，那么添加的是数组中的元素，而不是数组。

arrayX：必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。

3.常见问题

jquery如何实现深拷贝？

四.解决方案

jQuery.extend()

                
                    var arr = [['a','b'],0,1,2,{name:'old'}];
                    var newArr = $.extend(true, [], arr);
                    newArr[4].name = 'new';
                    newArr[0].push('c');
                    console.log(newArr);
                    console.log(arr);
                
            

五.深度思考

对象的深拷贝

原生js对象的浅拷贝和深拷贝的总结

六.编码实战

见DEMO

七.参考文献

参考一：JavaScript数组深拷贝和浅拷贝的两种方法

参考二：原生js对象的浅拷贝和深拷贝的总结

8.更多讨论

深拷贝的应用场景！

八.更多讨论

1、

Q：angular中有类似的方法吗？

A：copy
2、
Q：深拷贝原数组有变化吗？
A：没有
3、
Q：那么浅拷贝原数组如何变化？
A：和拷贝的数据变化一致。

PPT： 点击打开链接
视频： 点击打开链接