JavaScript中的对象拷贝

对象拷贝，可能很多人并不是很清楚，而且也使用的不多，简单的说拷贝对象就是直接复制一个数组或者一个对象，听到复制可能大家都蒙了，该如何才能达到复制一个对象或者数组？我们可以将这里的复制理解为是赋值，我们可以将一个数组或者一个对象直接赋值给一个变量，这个过程就可以称为复制（或者对象拷贝），大家一定不要被“复制、拷贝”这样的名词给搞晕了。下面我们来看几个简单的示例

1、JavaScript拷贝数组（浅拷贝）

[cc lang=”javascript”]var arry = [1,2,3]
var arry1 = arry
console.log(arry) //输出[1,2,3]，说明拷贝数组成功
arry1[1] = 6
console.log(arry1) //改变arry1拷贝过来数组中的值，输出[1,6,3][/cc]
这就是一个简单的数组拷贝的过程，其意义在于，当我们需要使用和arry相同数据的时候，并且只需要更改其中的一个值，从而达到另一个效果，那么我们就可以使用这一的方式进行数组拷贝。
当然，以上方法主要是属于数组的浅拷贝。

2、JavaScript数组深拷贝

1）、for 循环实现数组的深拷贝

[cc lang=”javascript”]var arr = [1,2,3,4,5,6]
function copyArry(){
let result = [];
for(var i=0;i2）、slice 方法实现数组的深拷贝(将原数组中抽离部分出来形成一个新数组)

[cc lang=”javascript”]var arr = [1,2,3,4,5,6]
var arr2 = arr.slice(0)
console.log(arr2) //[1,2,3,4,5,6]
arr[3] = 9
console.log(arr2) //[1,2,3,4,5,6]
console.log(arr) //[1,2,3,9,5,6][/cc]

3、concat 方法实现数组的深拷贝

这个代码也非常简单，原理更加粗暴。它是用于连接多个数组组成一个新的数组的方法。
[cc lang=”javascript”]var arr = [1,2,3,4,5]
var arr2 = arr.concat()
arr[2] = 5
console.log(arr)//[1, 2, 5, 4, 5]
console.log(arr2)//[1, 2, 3, 4, 5][/cc]

4、对象的深拷贝

1）、for循环实现对象拷贝

[cc lang=”javascript”]var obj = {
name:’李四’,
sex:’男’,
addr:’北京’
}
function copyObj(obj) {
let result = {}
for (var key in obj) {
result[key] = obj[key]
}
return result
}
var obj2 = copyObj(obj)
console.log(obj2)//{name: “李四”, sex: “男”, addr: “北京”}[/cc]

2)、转换成json再转换成对象实现对象的深拷贝

[cc lang=”javascript”]var obj = {
name:’李四’,
sex:’男’,
addr:’北京’
}
var obj2 = JSON.parse(JSON.stringify(obj))[/cc]

5、ES6中的对象拷贝（复制）

1）、使用Object.assign()

ES6中使用Object.assign()深度复制对象，包括其prototype
[cc lang=”javascript”]var Point = function(x)
{
return this.x = x;
}
Point.prototype.y = 2;
var obj = new Point(1);
var copy = Object.assign({ __proto__: obj.__proto__ }, obj); // 输出{x:1} ，__proto__为y:2
console.log(copy) // 输出{x:1},__proto__为y:2[/cc]

2）、ES6展开运算符(Spread Operator)

[cc lang=”javascript”]var obj = {a:1,b:2,c:3}
var obj1 = {obj,d:4,e:5}
console.log(obj1) //{a:1,b:2,c:3,d:4,e:5}[/cc]
但是这种方法如果出现重复的属性名称，就可以利用下面的方法去重
[cc lang=”javascript”]var obj = {a:1,b:2,c:3}
var obj1 = {a:4,b:5,c:6,obj}
console.log(obj1) //{a:1,b:2,c:3}[/cc]
先展开obj
[cc lang=”javascript”]var obj = {a:1,b:2,c:3}
var obj1 = {obj,a:4,b:5,c:6}
console.log(obj1) //{a:4,b:5,c:6}[/cc]
看到了吗？他们有一个先后顺序