1.背景介绍
什么是栈内存和堆内存？
JavaScript中的变量的存放有有原始值与引用值之分，原始值代表了原始的数据类型，如Undefined，Null，Number， String，Boolean类型的值；而Object，Function，Array等类型的值便是引用值了。
栈内存中存放的是存储对象的地址，而堆内存中存放的是存储对象的具体内容。对于原始类型的值而言 ，其地址和具体内容都存在与栈内存中；而基于引用类型的值，其地址存在栈内存，其具体内容存在堆内存中。堆内存 与栈内存是有区别的，栈内存运行效率比堆内存高，空间相对堆内存来说较小，反之则是堆内存的特点。所以将构造简 单的原始类型值放在栈内存中，将构造复杂的引用类型值放在堆中而不影响栈的效率。
2.知识剖析
什么是深拷贝和浅拷贝？
浅拷贝：复制一份引用，所有引用对象都指向一份数据，并且都可以修改这份数据。
深拷贝（复杂）：复制变量值，对于非基本类型的变量，则递归至基本类型变量后，再复制。可以使用slice和concat方法。
SLICE和CONCAT使用方法
slice：
语法：arrayObject.slice(start,end)
该方法并不会修改数组，而是返回一个子数组。
start：必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end:可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。
concat：
语法：arrayObject.concat(arrayX,arrayX,......,arrayX)
返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参 数是数组，那么添加的是数组中的元素，而不是数组。
arrayX：必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。
3.常见问题
深拷贝和浅拷贝的运用环境。
4.解决方案
这个要看大家具体的应用，注意到数组带来的影响。
5.编码实战
浅拷贝的实现,例如：
var arr = ["One","Two","Three"];
var arrto = arr; arrto[1] = "test”;
document.writeln("数组的原始值：" + arr + "
");//Export:数组的原始值：One,test,Three
document.writeln("数组的新值：" + arrto + "
");//Export:数组的新值：One,test,Three
深拷贝之slice：
var num = ["One","Two","Three"];
var newNum = num.slice(0);
newNum[1] = "haha";
document.writeln("数组的原始值：" + num + "
");//Export:数组的原始值：One,Two,Three
document.writeln("数组的新值：" + newNum + "
");//Export:数组的新值：One,haha,Three
深拷贝之concat
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
document.write(arr.concat(arr2))//输出：George,John,Thomas,James,Adrew,Martin；
6.扩展思考
对象的深拷贝
对象自己写个迭代函数就好了，只需copy到最底层的比如如下代码。
function deepCopy(obj,c) {
var c =c || {};
for(var i in obj) {
// 判断属性是否为对象，是的话就进一步展开
if (typeof(obj[i]) === 'object') {
// 递归拷贝
if (obj[i].constructor == Array){
c[i] = [];
deepCopy(obj[i],c[i]);
}
else {
c[i] = {};
deepCopy(obj[i],c[i]);
}
}
else {
c[i] = obj[i];
}
}
return c
};
7.参考文献
8.更多讨论
有被浅拷贝坑过的经历吗？
鸣谢
感谢大家观看
BY : 彭勇 | 李维文
ppt链接：https://ptteng.github.io/PPT/PPT/js-04-arr%20clone.html#/
视频链接：
什么是深拷贝和浅拷贝_腾讯视频
修真院链接：http://www.jnshu.com/login/1/92633351
网友评论