如何用TypeScript/JavaScript合并JS对象并覆盖重复键？

嘿，这个需求太常见啦！要实现后面对象覆盖前面对象同名属性、同时保留前者独有属性的合并，不管是纯JS还是TS都有超简单的方案，我给你捋清楚：

这是ES6+最常用的写法，可读性拉满。逻辑很简单：先把objectA的所有属性展开，再用objectB的属性去覆盖同名的，最终返回一个全新的对象。

// 纯 JavaScript 实现
const objectA = { key1: 'key1', key2: 'key2' };
const objectB = { key1: 'override a' };

const result = { ...objectA, ...objectB };
console.log(result); // 输出：{ key1: 'override a', key2: 'key2' }

在TypeScript里，类型会自动推导，如果你需要显式定义类型约束也可以这么写：

// TypeScript 实现
type MergeObject = { key1: string; key2?: string }; // key2设为可选，因为objectB里没有这个属性
const objectA: MergeObject = { key1: 'key1', key2: 'key2' };
const objectB: MergeObject = { key1: 'override a' };

const result: MergeObject = { ...objectA, ...objectB };
console.log(result); // 结果和JS一致，类型完全匹配

这是ES6引入的原生方法，和展开运算符效果完全一致。需要注意的是：如果不想修改原有的objectA，第一个参数一定要传空对象作为目标，后面依次传入源对象，源对象的属性会覆盖前面的同名属性。

// 纯 JavaScript 实现
const result = Object.assign({}, objectA, objectB);
console.log(result); // 输出：{ key1: 'override a', key2: 'key2' }

TypeScript里用法和JS完全一样，类型也会自动处理，当然你也可以显式声明类型：

// TypeScript 实现
const result: MergeObject = Object.assign({}, objectA, objectB);

• 上面两种方法都是浅合并，如果你的对象里有嵌套的子对象，子对象只会被直接覆盖而不是深度合并。不过你的场景是单层对象，完全不用操心这个~
• 两种方法都会返回新对象，不会修改原有的objectA和objectB，避免了意外的副作用。

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