【JS-4】
如何实现深拷贝与浅拷贝?
大家好,我是IT修真院成都分院第10期学员,一枚正直善良的web程序员。
今天给大家分享一下,修真院官网 JS-04任务中可能会使用到的知识点:
一.背景介绍
在使用JavaScript对数组进行操作的时候,我们经常需要将数组进行备份.
如下代码,如果只是简单才用赋值的方法,那么我们只要更改其中的任何一个,然后其他的也会跟着改变,这就导致了问题的发生
二.知识剖析
- 什么是深拷贝和浅拷贝?
- 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);
对象的深拷贝
见DEMO
七.参考文献
8.更多讨论
深拷贝的应用场景!
八.更多讨论
1、2、
Q:深拷贝原数组有变化吗?
A:没有
3、
Q:那么浅拷贝原数组如何变化?
A:和拷贝的数据变化一致。
PPT: 点击打开链接
视频: 点击打开链接