如何使用扩展语法（Spread Syntax）动态合并对象？

当然可以！扩展语法完全能应对这种对象数量和名称都未知的动态场景，不过直接写{...objects_to_be_merged}可不行——那样只会把数组自身的属性（比如length、索引值）合并进去，而不是数组里的每个对象。

这里有两种优雅的实现方式，和你静态合并的行为完全一致：

方法一：用Object.assign()配合扩展语法 #

这是最直接高效的方式，利用Object.assign()的特性，把数组里的每个对象展开成单独参数传入：

// 模拟动态获取对象列表
function get_objects() {
  return [
    { name: 'David Walsh', gender: 'Male' },
    { computer: 'Mac', editor: 'Atom' },
    { hobby: 'Coding', location: 'USA' }
  ];
}

const objects_to_be_merged = get_objects();
// 核心代码：合并所有对象
const summary = Object.assign({}, ...objects_to_be_merged);

原理说明： #

• Object.assign()会把后续参数里的所有对象属性，依次合并到第一个参数（这里是空对象{}，避免修改原对象）中。
• 扩展语法...objects_to_be_merged把数组里的每个对象拆成单独的参数，相当于手动写Object.assign({}, obj1, obj2, obj3...)。
• 如果数组里有null或undefined，Object.assign()会自动忽略它们，不会报错。

方法二：用数组reduce()配合扩展语法 #

如果你更喜欢函数式风格，也可以用reduce()逐个合并对象：

const objects_to_be_merged = get_objects();
const summary = objects_to_be_merged.reduce((mergedObj, currentObj) => {
  return {...mergedObj, ...currentObj};
}, {});

原理说明： #

• reduce()从初始空对象{}开始，每次迭代把当前对象的属性通过扩展语法合并到累加器对象中。
• 最终累加器就是所有对象合并后的结果，和静态的{...obj1, ...obj2, ...obj3}行为完全一致。

注意事项： #

• 两种方法都会遵循后覆盖前的规则：如果多个对象有同名属性，后面的对象属性会覆盖前面的。
• 如果你的可迭代对象不是数组（比如Set），需要先转成数组再处理，比如[...myIterableSet]。

内容的提问来源于stack exchange，提问作者Oblomov