首先来看看它的定义作用:
Object.assign()方法用于对象的合并,将源对象(source)的所有
可枚举属性
,复制到目标对象(target)。
这里就先注意一下可枚举属性,简单的介绍一下:
js中有可枚举属性和不可枚举属性,它们是由属性的enumerable
值决定的。用propertyIsEnumerable可以来判断该属性是否是可枚举属性。用最简单化能理解的话来说:
可枚举属性可以被 for…in…遍历,不可枚举的属性则不能被遍历。 js中的基本包装类型的原型属性是不可枚举的,比如Array,Number等
举个栗子:
function Person() {
this.name = "张三"
this.age = 19;
}
var p = new Person();
console.log(p.propertyIsEnumerable("name"));
Person.prototype.prop = "李四" //添加一个原型属性
console.log(p.propertyIsEnumerable("prop"));
for (var k in p) {
console.log(k + "," + p[k]);
}
由此可见,在原型上加的属性,不管是不是可枚举的,使用propertyIsEnumerable方法的时候返回值都是:false,但是能被for…in…给遍历出来。说明它是可枚举属性。
**
言归正传,Object.assign()方法
**
先放上一个简单栗子:
const a = {
a: 1
};
const b = {
b: 2
};
const c = {
c: 3
};
Object.assign(a, b, c);
console.log(a);
会发现,定义的对象 a 的值从一开始的 {a:1} 变成了{a:1,b:2,c:3}
第一个参数:
是目标对象,就是将后面的对象都复制到它身上。(当它只有一个参数的时候,这个参数就是目标对象。)
第二个参数、第三个参数等等:
都是源对象。
它返回的参数
都是一个object类型,如果里面的参数不是object类型,则它会自动先将它转换成object类型。
由于undefined和null无法转成对象,所以如果它们作为目标对象时,就会报错
Object.assign(undefined) // 报错
Object.assign(null,b) // 报错
但是undefined和null作为源对象
的时候,是不会报错的。因为它在处理源对象的时候,会先将它转换成对象,如果无法转成对象,就会跳过。
Object.assign(b, undefined) === b // true
Object.assign(b, null) === b // true
除了字符串会以数组形式,拷贝入目标对象,其他值都不会产生效果。
这里就要理解到,前面说的可枚举类型了。js中的基本包装类型的原型属性是不可枚举的,比如Number等。
const a = {
a: 1
};
const b = {
b: 2
};
const c = {
c: 3
};
Object.assign(a, b, c, 456, 'hi');
console.log(a);
这里可以得知,参数里面的 456 是Number类型的,它是不可枚举的,所以 Object.assign()是不会将该属性复制到 a 对象中。但是,字符串类型的便可以。这是因为只有字符串的包装对象,会产生可枚举属性。
数组的处理
Object.assign()可以用来处理数组,但是会把数组视为对象。
Object.assign([1, 2, 3], [4, 5]) // [4, 5, 3]
上面代码中,Object.assign()把数组视为属性名为 0、1、2 的对象,因此源数组的 0 号属性4覆盖了目标数组的 0 号属性1。