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

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

1.背景介绍

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

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

var arr1 = ["red","yellow","black"];

var arr2 = arr1;

arr2[1] = "green";

console.log("数组的原始值：" + arr1 );

console.log("数组的新值：" + arr2);

测试结果如下：

像上面的这种直接赋值的方式就是数组的浅拷贝，浅拷贝改变其中一个数组，另外一个数组也会跟着改变。很多时候，这不是我们想要的。

2.知识剖析

什么是深拷贝和浅拷贝?

slice和concat使用方法

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

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

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

2.slice和concat使用方法

语法：arrayObject.slice(start,end)

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

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

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

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

vararr=newArray(3);

arr[0] ="George";

arr[1] ="John";

arr[2] ="Thomas";

document.write(arr);

document.write(arr.slice(1) );

document.write(arr);

返回结果：George,John,Thomas

                  John,Thomas

                   George,John,Thomas

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

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

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

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

vara= [1,2,3];

document.write(a.concat(4,5));//返回值：1,2,3,4,5

3.常见问题

jquery如何实现深拷贝？

4.解决方案

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);

5.参考文献

JavaScript数组深拷贝和浅拷贝的两种方法

鸣谢

感谢大家观看