在JavaScript编程中,我们常常需要把一个对象的属性转移到另一个对象里,以此来合并或者混合对象。ES6(ECMAScript 6)引入了Object.assign()
方法,让这个过程变得简单。
Object.assign() 方法介绍
Object.assign()
的作用是将一个或多个源对象的所有可枚举自有属性拷贝到目标对象。
使用方式:
Object.assign(target, ...sources)
参数说明:
target
:这是我们要把属性拷贝进去的目标对象。sources
:这是包含我们要拷贝属性的一个或多个源对象。
返回值:
这个方法会返回被修改后的目标对象。
它是怎么工作的:
- 它会逐一检查每一个源对象。
- 对于每个源对象,找到它的可枚举自有属性(通过
Object.propertyIsEnumerable()
和Object.hasOwnProperty()
来确定)。 - 利用源对象的
[[Get]]
操作得到属性值。 - 然后利用目标对象的
[[Set]]
操作设定属性值。
代码示例
1. 简单复制
let dest = {};
let src = { id: 'src' };
let result = Object.assign(dest, src);
console.log(dest === result); // 输出true,因为Object.assign()修改了目标对象,并返回它
console.log(dest !== src); // 输出true,目标对象和源对象是两个不同的对象
console.log(result); // 输出{ id: 'src' }
console.log(dest); // 输出{ id: 'src' }
2. 从多个对象复制
let dest = {};
let result = Object.assign(dest, { a: 'foo' }, { b: 'bar' });
console.log(result); // 输出{ a: 'foo', b: 'bar' }
3. 复制时有 getter 和 setter
let dest = {
set a(val) {
console.log(`调用了dest的setter,参数是${val}`);
}
};
let src = {
get a() {
console.log('调用了src的getter');
return 'foo';
}
};
Object.assign(dest, src);
// 这里会调用src的getter
// 然后调用dest的setter,并传递参数"foo"
// 由于这里的setter并不真正赋值,所以dest.a仍然是undefined
console.log(dest); // 输出{ set a(val) {...} }
需要注意的地方
Object.assign()
会改变目标对象。- 如果有同名的属性,后面的属性会覆盖前面的。
Object.assign()
只能拷贝可枚举的自有属性。- 对于那些属性值是对象的情况,
Object.assign()
做的是浅拷贝。