在前端开发当中，扩展运算符是一种实用的语法，它可以用来展开数组和对象，非常方便和灵活。在 ES11 中，这个语法被进一步扩展，现在可以使用扩展运算符简单而有效地合并多个对象，从而加快编码的速度和提高代码的可读性。
什么是扩展运算符？
在 ES6 中，引入了扩展运算符语法，它用三个点（...）表示，在函数调用的时候，可以将数组或对象中的每个元素作为单独的参数传递给函数，或创建一个新的数组或对象。以下是扩展运算符的一些基本用法：
-- -------------------- ---- ------- -- ------------ ----- --- - --- -- --- -------------------- -- - - - -- -------- ----- ---- - --- -- --- ----- ------ - -------- --------- -- --- -- -- -- -- -- -- ------------ ----- --- - - -- -- -- -- -- - -- ----- ------ - - ------- -- - -- -- - -- -- -- -- -- -- -- - -
ES11 中使用扩展运算符合并多个对象
在 ES11 中，我们可以使用扩展运算符轻松地合并多个对象，就像这样：
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const obj3 = { e: 5, f: 6 };
const mergedObject = { ...obj1, ...obj2, ...obj3 };
console.log(mergedObject); // { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }在上面的代码中，我们创建了三个对象 obj1、obj2 和 obj3，然后通过在这些对象之间使用扩展运算符（...）将它们合并在一起。合并后的对象 mergedObject 中包含了 obj1、obj2 和 obj3 所有的属性和值。
扩展运算符的重复键解决方案
当扩展运算符被用于合并包含重复键的对象时，这些键的值将被后面的对象的值所覆盖，如下所示：
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObject = { ...obj1, ...obj2 };
console.log(mergedObject); // { a: 1, b: 3, c: 4 }在上面的代码中，我们尝试将 obj1 和 obj2 合并成一个对象，但由于 obj2 中具有与 obj1 中 b 属性相同的键，因此 obj2 中的值将覆盖 obj1 中的值，从而产生了一个新的对象 mergedObject，其中 b: 2 被 b: 3 所覆盖。
为了解决这个问题，我们可以使用对象的解构方法，在“扩展”之前删除重复的属性。
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObject = { ...obj1, ...obj2 };
const { b, ...rest } = mergedObject;
const remergedObject = { ...rest, b };
console.log(remergedObject); // { a: 1, c: 4, b: 3 }在上面的代码中，我们将 mergedObject 从重复的属性 b 中解构出来，并将剩余的属性存储在 rest 中。然后，我们再次使用扩展运算符重新创建一个对象，但这次我们使用了新的顺序，使得最后的 b 属性来自 obj2，而不是 obj1。
结论
使用 ES11 中的扩展运算符将多个对象合并成一个对象是一种强大和高效的技巧，可以极大地提高前端代码的可读性和可维护性。为了避免重复属性键的问题，我们可以使用对象解构来删除重复属性，并使用新的顺序重新创建一个对象。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674ab29aa1ce0063549f2c60