在前端开发中，我们经常需要合并两个或多个对象的属性。在 ES6 中，我们可以使用展开运算符和 Object.assign() 方法来实现这一功能。而在 ECMAScript 2019 (ES10) 中，Object.assign() 方法得到了进一步的改进，使其更加灵活和方便。本文将介绍如何使用 ES10 中的 Object.assign() 方法来合并对象属性，并提供详细的示例代码和指导意义。
什么是 Object.assign() 方法？
Object.assign() 方法是 ES6 中引入的一个静态方法，用于将一个或多个源对象的属性复制到目标对象中。它接受一个目标对象和一个或多个源对象作为参数，将源对象的属性复制到目标对象中，并返回目标对象。如果目标对象中已经存在相同的属性，则源对象的属性将覆盖目标对象的属性。
在 ES10 中，Object.assign() 方法得到了改进，使其可以正确处理 Symbol 类型的属性，并且可以合并原型链上的属性。此外，它还可以正确处理 getters 和 setters，使得合并后的对象可以正确地调用这些方法。
如何使用 Object.assign() 方法来合并对象属性？
要使用 Object.assign() 方法来合并对象属性，我们需要传递一个目标对象和一个或多个源对象作为参数。源对象的属性将被复制到目标对象中，并返回合并后的目标对象。如果源对象中有与目标对象相同的属性，则会覆盖目标对象的属性。
下面是一个简单的示例代码，说明如何使用 Object.assign() 方法来合并两个对象的属性：
const obj1 = { foo: 'bar', baz: 'qux' };
const obj2 = { baz: 'quux', quux: 'corge' };
const mergedObj = Object.assign({}, obj1, obj2);
console.log(mergedObj); // { foo: 'bar', baz: 'quux', quux: 'corge' }在上面的示例代码中，我们首先定义了两个对象 obj1 和 obj2，它们都有一个名为 baz 的属性。然后我们使用 Object.assign() 方法将这两个对象合并到一个新的对象 mergedObj 中。由于 obj2 中的 baz 属性覆盖了 obj1 中的 baz 属性，因此合并后的对象中 baz 属性的值为 'quux'。
如何合并原型链上的属性？
Object.assign() 方法不会复制原型链上的属性。但是，在 ES10 中，我们可以使用 Object.getOwnPropertyDescriptors() 方法和 Object.create() 方法来合并原型链上的属性。具体来说，我们可以使用 Object.getOwnPropertyDescriptors() 方法获取源对象和目标对象的属性描述符，然后使用 Object.create() 方法创建一个新的对象，该对象的原型链指向目标对象的原型链，最后使用 Object.defineProperties() 方法将源对象和目标对象的属性描述符复制到新对象中。
下面是一个示例代码，说明如何合并原型链上的属性：
// javascriptcn.com 代码示例
const parent = { foo: 'bar' };
const child = Object.create(parent, {
baz: { value: 'qux' },
quux: { value: 'corge' }
});
const newObj = Object.assign(
Object.create(Object.getPrototypeOf(child)),
child,
Object.getPrototypeOf(child)
);
console.log(newObj); // { baz: 'qux', quux: 'corge', foo: 'bar' }在上面的示例代码中，我们首先定义了一个父对象 parent 和一个子对象 child，子对象的原型链指向父对象。然后我们使用 Object.create() 方法创建一个新对象 newObj，该对象的原型链指向子对象的原型链。最后，我们使用 Object.assign() 方法将子对象和父对象的属性复制到新对象中，从而合并了原型链上的属性。
如何正确处理 getters 和 setters？
在 ES10 中，Object.assign() 方法可以正确处理 getters 和 setters。具体来说，如果源对象和目标对象都有同名的 getter 或 setter，则会将它们合并成一个 getter 或 setter。但是，如果目标对象有同名的普通属性，则会覆盖源对象的 getter 或 setter。
下面是一个示例代码，说明如何正确处理 getters 和 setters：
// javascriptcn.com 代码示例
const obj1 = {
get foo() { return 'bar'; },
set foo(value) { console.log(value); }
};
const obj2 = {
get foo() { return 'baz'; },
set foo(value) { console.log(value); },
bar: 'qux'
};
const mergedObj = Object.assign({}, obj1, obj2);
console.log(mergedObj.foo); // 'baz'
console.log(mergedObj.bar); // 'qux'
mergedObj.foo = 'quux'; // 'quux'在上面的示例代码中，我们首先定义了两个对象 obj1 和 obj2，它们都有一个名为 foo 的 getter 和 setter。然后我们使用 Object.assign() 方法将这两个对象合并到一个新的对象 mergedObj 中。由于 obj2 中的 foo getter 和 setter 覆盖了 obj1 中的 foo getter 和 setter，因此合并后的对象中 foo 属性的 getter 和 setter 都来自 obj2。同时，由于 obj2 中还有一个名为 bar 的普通属性，因此合并后的对象中也包含了 bar 属性。
总结
Object.assign() 方法是一个非常有用的方法，可以用于合并两个或多个对象的属性。在 ES10 中，它得到了进一步的改进，使其更加灵活和方便。我们可以使用它来合并原型链上的属性，并且可以正确处理 getters 和 setters。在实际开发中，我们可以结合其他方法和技术，如 Object.getOwnPropertyDescriptors() 方法和 Object.create() 方法，来实现更加复杂的合并操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650826f995b1f8cacd350ec9