JavaScript数组与对象拷贝
在我不长的开发经历中，常常在js中遇到数组或对象拷贝的情况，总是不能写对。 于是决定好好梳理一遍相关的知识。
预备知识： 引用类型
ECMAScript 变量可能包含两种不同数据类型的值： 基本类型值和引用类型值 。
当从一个变量向另一个变量复制引用类型的值时，实际复制的是指针，指向存储在堆中的同一个对象。因此改变其中一个变量，就会影响另一个变量。
——《JavaScript高级程序设计(第三版)》
数组Array和对象Object同属于引用类型，因此在拷贝时需要额外的工作，而不能简单的按照 c=a , a=b, b=c的方式来赋值。
数组拷贝
数组的浅拷贝就是直接赋值
var a = [1,2,3];
var b = a; // b = [1,2,3]
b[0] = 10; // b = [10,2,3], a = [10,2,3]
引用类型传递的是地址，因此修改数组b后数组a也会跟着改变。
-
改进办法1 Array.splice( ) 方法
数组类型的splice( )方法本来时用于切割数组的，接收两个参数，起点与终点索引值，将这个区间内的数组元素<b>浅拷贝</b>到一个新数组并返回，原数组保持不变。 若不传递任何参数给splice( )方法，则会默认<b>浅拷贝</b>数组中的每一个元素到一个新数组并返回。由于是复制的数组元素而非数组变量本身，因此传递的是数组中每一个元素的值或地址。
var a = [1,2,3]; var b = a.splic(); //b = [1,2,3] b[0] = 10; //b = [10,2,3], a = [1,2,3]这个办法具有局限性，因为其终究是浅拷贝，如果数组中的元素含有引用类型，那么改变新数组中它的值仍会反应到原数组中：
var obj = { prop: 1}; var a = [obj,1,2,3]; // a = [{prop:1},1,2,3] var b = a.splice(); // b = [{prop:1},1,2,3] b[0].prop = 20; b[1] = 10; // b = [{prop:20},10,2,3] // a = [{prop:20},1,2,3]另外，当被拷贝数组中包含数组元素时（类似二维数组），使用该方法复制将返回空数组。
-
改进办法2 Array . concat( ) 方法
数组类型的concat( ) 方法主要用于连接多个数组返回一个新数组，若不带参数则返回一个原数组的拷贝，遗憾的是这个拷贝仍为浅拷贝。与splice( ) 方法表现稍不同的是，若被复制数组中包含数组元素，它仍将正常工作，返回浅拷贝。
var a = [1,2,3]; var b = [4,5]; var c = [a,b]; //c = [[1,2,3],[4,5]]; var d = c.concat(); //d = [[1,2,3],[4,5]]; var e = c.splice(); //e = []; d[1][1] = 10; //d = [[1,2,3],[4,10]]; //c = [[1,2,3],[4,10]]
对象拷贝
直接赋值仍然是浅拷贝，要做到对象的深拷贝，需要将属性一一拷贝到新对象上:
var a = {prop1:1, prop2:2, prop3:3};
//声明一个函数执行深拷贝
function deepCopy(obj){ //接收待拷贝的对象最为参数
var copy = {}; //声明新副本对象
for(prop in obj){ // for in语句遍历对象属性
copy[prop] = obj[prop] // for in 语句中遍历结果为属性的字符串名，因此需以[]方式访问
}
return copy; //返回新对象
}
var b = deepCopy(a); // b = {prop1:1,prop2:2,prop3:3}
b.prop1 = 10; // b = {prop1:10,prop2:2,prop3:3}
// a = {prop1:1, prop2:2,prop3:3}
上述这总解决办法只能拷贝所有属性均为基本类型值的对象，如果拷贝的对象其属性中包含了Object或Array等引用类型，仍然会出现指向同一个地址的情况（虽然对象本身没有指向同一个地址了，但是这些引用类型属性仍然指向了同一个地址）。考虑到对象属性层层嵌套的情况并不少见，因此deepCopy( )函数仍然需要优化：
function deepCopy(obj) {
let copy = {};
for (prop in obj) {
if (obj[prop] instanceof Object) { //先判断该属性是否也是一个Object对象
copy[prop] = deepCopy(obj[prop]); //若为对象则对该属性再递归调用deepCopy()赋值给新对象的该属性
} else {
copy[prop] = obj[prop] //若该属性不为Object类型，则直接赋值即可
}
}
return copy; //返回拷贝出的新对象
}
到这里，上述这些方法函数已经完全能够解决我遇到的所有情景了。但其实这个问题还可以推得很深推得很细，下面就来做点"无用功", 再往前迈进一步。
混合拷贝
如前所述，数组的拷贝方法在数组元素为Object或者Array类型时仍然有无法做到副本与原变量独立。 再加上JavaScript “独特”的语言特性，数组与对象可以做到 “你中有我，我中有你” 的混合状态，因此可以再次改进deepCopy( ) ，让它能实现混合情景下的深拷贝。
function deepCopy(origin){
let copy = null; //声明副本
if(origin.constructor === Array){ //确定副本的类型
copy = [];
}else if(origin.constructor === Object){
copy = {};
}
for(i in origin){ //遍历原变量的枚举属性
if(origin[i] instanceof Object){ //Array和Object类型其原型链上均含Object构造函数
copy[i] = deepCopy(origin[i])
}else{
copy[i] = origin[i];
}
}
return copy;
}
现在，deepCopy( ) 可以轻松应对任何包含 数组或者对象的深拷贝了。
虽然 MDN不推荐用for in遍历数组，因为其返回的是索引数字的字符串值，并且在不同的ECMA-262标准中返回的属性或索引值顺序是不同的，不一定按照对象构造时的属性顺序或数组索引值的大小顺序。但是这里拷贝数组则不用担心，虽然不按顺序返回索引值，但最终还是遍历了整个数组。 这样对象分支和数组分支就合并在了同一个for in语句中，代码变得更为简洁。
参考网站： MDN-JavaScript
