ES6的Object.assign()


ES6新增了很多语法，今天我们来详细了解一下Object对象的新方法assign();

使用方法：

我们之前需要拷贝一个对象的属性的时候是这样的：

1
2
3
4
5
6
7
8
9
10
var a = { aa: "123" };

var b = { bb: "456" };

var c = { cc: "789" };

c.aa = a.aa;
c.bb = b.bb;

// 结果： c = {cc: "789", aa: "123", bb: "456"}

如上所示，这是我们以前常用的属性赋值，但是有了Object.assign()后可以这样：

1
2
3
4
5
6
7
var a = { aa: "123" };

var b = { bb: "456" };

let c = Object.assign({ cc: "789"}, a, b);

// 结果： c = {cc: "789", aa: "123", bb: "456"}

这样一下，瞬间省了很多代码，而且更加清晰明了有木有。并且，它还能够给默认值，例如：

1
2
3
4
5
let a = { aa: "123" };

let b = Object.assign( {bb="111",aa="222"}, a);

///结果b = {bb: "111", aa: "123"}

如果目标对象中有属性与源对象相同的属性，那么最后将会覆盖掉目标对象中的属性值，也就是后面的相同属性会覆盖掉前面的属性值。

注意：

网上对于Object.assign()的说法不一致，有的说的深拷贝有的说是浅拷贝，当然官方说的是浅拷贝，但是，做了如下测试后：

1
2
3
4
5
6
7
8
let a = { aa: "123", ab: "34", ac: 12 };

let b = Object.assign({},a);

b.aa = "456";

// 结果 a = {aa: "123", ab: "34", ac: 12};
//      b = {aa: "456", ab: "34", ac: 12};

哎，这结果就很有趣了，这明明就是深拷贝啊，再看看下面的例子：

1
2
3
4
5
6
7
8
9
10
11
let a = { aa: "123", ab: { abb: "456"}};

let b = { bb: "789" };

let c = Object.assign({}, b, a);

c.ab.abb = "111111";

//结果： c = { aa: "123", ab: {abb: "111111"}, bb: "789" };
        b = { bb: "789" };
        a = { aa: "123", ab: { abb: "111111"}};

是不是发现a的ab属性变了？这是怎么回事呢？

官方的说法是：Object.assign()只会从来源物件将自身可列举的属性复制都目标物件。

我的理解是：Object.assign()只会复制源对象的属性值，如果属性值是的数据类型是基本数据类型（string,number等）的话，将会直接复制值，如果是引用数据类型（object,array）的话，它只会复制源对象属性的引用。

所以对于Object.assign是深拷贝还是浅拷贝这种问题不必太过于去深究，我们只要知道它在什么样的情景下才能够使用就行了。

这里我也提供了一种对象的深拷贝的方法，很简单：

1
let newobj = JSON.parse(JSON.stringify(obj));