Notes for a front-end developer, esyou.net

0%

JAVASCRIPT中的对象拷贝

发表于 分类于 Valine：
本文字数： 2.1k 阅读时长 ≈ 2 分钟

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

JavaScript拷贝数组（浅拷贝）

1
var arry = [1,2,3]
2
var arry1 = arry
3
console.log(arry) //输出[1,2,3]，说明拷贝数组成功
4
arry1[1] = 6
5
console.log(arry1) //改变arry1拷贝过来数组中的值，输出[1,6,3]

这就是一个简单的数组拷贝的过程，其意义在于，当我们需要使用和arry相同数据的时候，并且只需要更改其中的一个值，从而达到另一个效果，那么我们就可以使用这一的方式进行数组拷贝。
当然，以上方法主要是属于数组的浅拷贝。

JavaScript数组深拷贝

for 循环实现数组的深拷贝

1
var arr = [1,2,3,4,5,6]
2
function copyArry(){
3
   let result = [];
4
   for(var i=0;i<arr.length;i++){
5
     result.push(arr[i])
6
   }
7
   return result;
8
}
9
var arr1 = copyArry();

slice 方法实现数组的深拷贝

将原数组中抽离部分出来形成一个新数组

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

concat 方法实现数组的深拷贝

这个代码也非常简单，原理更加粗暴。它是用于连接多个数组组成一个新的数组的方法。

1
var arr = [1,2,3,4,5]
2
var arr2 = arr.concat()
3
arr[2] = 5
4
console.log(arr)//[1, 2, 5, 4, 5]
5
console.log(arr2)//[1, 2, 3, 4, 5]

对象的深拷贝

for循环实现对象拷贝

1
var obj = {
2
  name:'李四',
3
  sex:'男',
4
  addr:'北京'
5
}
6
function copyObj(obj) {
7
  let result = {}
8
  for (var key in obj) {
9
    result[key] = obj[key]
10
  }
11
  return result
12
}
13
var obj2 = copyObj(obj)
14
console.log(obj2)//{name: "李四", sex: "男", addr: "北京"}

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

1
var obj = {
2
  name:'李四',
3
  sex:'男',
4
  addr:'北京'
5
}
6
var obj2 = JSON.parse(JSON.stringify(obj))

ES6中的对象拷贝（复制）

使用Object.assign()

ES6中使用Object.assign()深度复制对象，包括其prototype

1
var Point = function(x)
2
{
3
    return this.x = x;
4
}
5
Point.prototype.y = 2;
6
var obj = new Point(1);
7
var copy = Object.assign({ __proto__: obj.__proto__ }, obj); // 输出{x:1} ，__proto__为y:2
8
console.log(copy) // 输出{x:1},__proto__为y:2

ES6展开运算符(Spread Operator)

1
var obj = {a:1,b:2,c:3}
2
var obj1 = {obj,d:4,e:5}
3
console.log(obj1) //{a:1,b:2,c:3,d:4,e:5}

但是这种方法如果出现重复的属性名称，就可以利用下面的方法去重

1
var obj = {a:1,b:2,c:3}
2
var obj1 = {a:4,b:5,c:6,obj}
3
console.log(obj1) //{a:1,b:2,c:3}

先展开obj

1
var obj = {a:1,b:2,c:3}
2
var obj1 = {obj,a:4,b:5,c:6}
3
console.log(obj1) //{a:4,b:5,c:6}

看到了吗？他们有一个先后顺序