ES6新增了很多语法,今天我们来详细了解一下Object对象的新方法assign();
使用方法:
我们之前需要拷贝一个对象的属性的时候是这样的:
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()后可以这样:
var a = { aa: "123" };
var b = { bb: "456" };
let c = Object.assign({ cc: "789"}, a, b);
// 结果: c = {cc: "789", aa: "123", bb: "456"}
这样一下,瞬间省了很多代码,而且更加清晰明了有木有。并且,它还能够给默认值,例如:
let a = { aa: "123" };
let b = Object.assign( {bb="111",aa="222"}, a);
///结果b = {bb: "111", aa: "123"}
如果目标对象中有属性与源对象相同的属性,那么最后将会覆盖掉目标对象中的属性值,也就是后面的相同属性会覆盖掉前面的属性值。
注意:
网上对于Object.assign()的说法不一致,有的说的深拷贝有的说是浅拷贝,当然官方说的是浅拷贝,但是,做了如下测试后:
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};
哎,这结果就很有趣了,这明明就是深拷贝啊,再看看下面的例子:
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是深拷贝还是浅拷贝这种问题不必太过于去深究,我们只要知道它在什么样的情景下才能够使用就行了。
这里我也提供了一种对象的深拷贝的方法,很简单:
let newobj = JSON.parse(JSON.stringify(obj));