在javascript中合并对象最推荐的方式是使用展开语法或object.assign()方法，1. 展开语法通过{...obj1, ...obj2}创建新对象，不修改原对象，符合不可变性原则；2. object.assign()通过object.assign(target, source1, source2)将源对象属性复制到目标对象，若目标为空则实现合并，否则会修改目标对象；3. 两者均执行浅拷贝，嵌套对象仅复制引用，需手动递归或使用lodash的merge实现深拷贝；4. 属性冲突时遵循“后覆盖前”规则，右侧对象属性优先；5. 合并多个对象时，两种方法均支持链式或参数列表方式，按顺序从左到右合并，后出现的属性值覆盖前面同名属性，最终返回合并后的对象。
在JavaScript里合并两个对象，最常见也是最推荐的方式，通常是利用展开语法（spread syntax）或者
Object.assign()方法。这两种方式各有侧重，但都能高效地将多个对象的属性汇集到一起，形成一个新的对象，或者更新一个现有对象。
解决方案
说起JavaScript里对象合并，这事儿看似简单，但真要抠细节，还是有些门道的。我们最常用的，也是我个人觉得在现代JS开发中最舒服的方式，就是展开语法（spread syntax）。
想象一下，你有一堆零散的积木（对象的属性），你想把它们都放到一个新的盒子里。展开语法就是那个能帮你把积木从旧盒子里“倒”出来，再“铺”到新盒子里的工具。
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
// 使用展开语法合并
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // { a: 1, b: 2, c: 3, d: 4 }这种方式的优点在于它创建了一个全新的对象，原始对象不会被修改，这符合函数式编程中“不可变性”的理念，让代码更可预测，尤其是在状态管理中，这简直是福音。它就像是制作一份新的文件副本，而不是直接在原文件上涂改。
当然，还有个老牌选手，Object.assign()
方法。它就像是一个工厂的工人，负责把源对象的属性复制到目标对象上。
const objA = { x: 10, y: 20 };
const objB = { z: 30 };
// 使用Object.assign()合并
const targetObj = {}; // 通常我们会提供一个空对象作为目标
Object.assign(targetObj, objA, objB);
console.log(targetObj); // { x: 10, y: 20, z: 30 }
// 也可以直接合并到现有对象上，但会修改它
const existingObj = { name: 'Alice' };
Object.assign(existingObj, { age: 30 });
console.log(existingObj); // { name: 'Alice', age: 30 }Object.assign()的第一个参数是目标对象，后面的参数是源对象。它会将所有源对象的可枚举属性复制到目标对象上，并返回目标对象。要注意的是，如果第一个参数不是一个空对象，那么这个对象本身会被修改。在某些场景下，你可能就想原地修改一个对象，那
Object.assign()就很合适。但如果你追求不可变性，记得传入一个空对象作为第一个参数。
这两种方法，无论是展开语法还是
Object.assign()，它们都只执行浅拷贝。这意味着如果你的对象里嵌套了其他对象或数组，合并时只会复制它们的引用，而不是递归地复制它们的内容。这一点，我们待会儿可以展开聊聊，因为这常常是初学者踩坑的地方。
合并对象时，属性冲突如何解决？
这是个很实际的问题，毕竟不是每次合并都那么风平浪静，属性名一样的情况太常见了。当两个或多个对象在合并时拥有相同的属性名，JavaScript有一套清晰的规则来处理这种“冲突”，简单来说就是“后来者居上”。
无论是使用展开语法还是
Object.assign()，它们的行为都是一致的：位于后面（或右侧）的对象的同名属性值，会覆盖前面（或左侧）对象的属性值。
我们来看个例子：
const userDefault = {
name: 'Guest',
role: 'viewer',
permissions: ['read']
};
const userConfig = {
name: 'John Doe',
permissions: ['write', 'delete'],
status: 'active'
};
// 使用展开语法
const finalUserSpread = { ...userDefault, ...userConfig };
console.log(finalUserSpread);
/*
{
name: 'John Doe', // userConfig 的 name 覆盖了 userDefault 的
role: 'viewer',
permissions: ['write', 'delete'], // userConfig 的 permissions 覆盖了 userDefault 的
status: 'active'
}
*/
// 使用Object.assign()
const finalUserAssign = Object.assign({}, userDefault, userConfig);
console.log(finalUserAssign);
/*
{
name: 'John Doe', // userConfig 的 name 覆盖了 userDefault 的
role: 'viewer',
permissions: ['write', 'delete'], // userConfig 的 permissions 覆盖了 userDefault 的
status: 'active'
}
*/从这个例子可以看到，
name和
permissions属性都被
userConfig中的值覆盖了。这很符合直觉，也常用于配置合并的场景：先定义一个默认配置，然后用用户提供的配置去覆盖或补充它。
这种“覆盖”机制在很多情况下都非常有用，比如当你需要合并一个基础配置对象和用户自定义的特定配置时。你只需要把默认值放在前面，把个性化设置放在后面，就能轻松实现配置的优先级管理。但同时也要注意，如果你希望合并的属性是某种“累加”而不是“覆盖”，比如两个数组属性，那这种默认的合并行为就帮不上忙了，你需要自己写额外的逻辑来处理。这正是“浅拷贝”特性带来的影响，我们接着聊。
深拷贝与浅拷贝：合并嵌套对象时需要注意什么？
前面提到，无论是展开语法
...还是
Object.assign()，它们都执行的是浅拷贝。这意味着什么呢？简单来说，它们只会复制对象的第一层属性。如果属性值是基本类型（字符串、数字、布尔值、null、undefined、Symbol、BigInt），那它们会被直接复制一份。但如果属性值是引用类型（对象、数组、函数），那么复制的将是这个引用本身的地址，而不是引用指向的实际内容。
这听起来有点抽象，我们直接看个例子来感受一下这个“坑”：
const userProfile = {
id: 1,
name: 'Jane',
address: {
street: '123 Main St',
city: 'Anytown'
},
hobbies: ['reading', 'hiking']
};
const updates = {
name: 'Jane Doe',
address: {
city: 'Newville' // 假设我们只更新城市
},
hobbies: ['coding'] // 假设我们想添加一个爱好
};
const mergedProfile = { ...userProfile, ...updates };
console.log(mergedProfile);
/*
{
id: 1,
name: 'Jane Doe',
address: { city: 'Newville' }, // 注意：street 属性不见了！
hobbies: ['coding'] // 注意：hiking 爱好不见了！
}
*/
// 更糟糕的是，如果更新的是引用类型内部的属性
const userProfile2 = {
id: 2,
name: 'Bob',
settings: {
theme: 'dark',
notifications: {
email: true,
sms: false
}
}
};
const updates2 = {
settings: {
notifications: {
sms: true // 试图只更新sms通知
}
}
};
const mergedProfile2 = { ...userProfile2, ...updates2 };
console.log(mergedProfile2);
/*
{
id: 2,
name: 'Bob',
settings: {
notifications: { sms: true } // 注意：theme 属性和 email 通知都不见了！
}
}
*/看到了吗？当
updates对象中的
address属性是一个新的对象时，它会完全替换掉
userProfile中的
address对象，而不是合并它们内部的属性。同样，
hobbies数组也被整个替换了。在第二个例子里，
settings和
notifications也是如此。这种行为可能不是你想要的，你可能希望的是深度合并，即递归地合并嵌套对象和数组的属性。
要实现深拷贝合并，
...和
Object.assign()就无能为力了。你通常需要：
- 手动递归合并： 编写一个函数，遍历对象的每一个属性。如果属性值是对象或数组，就递归调用自身进行合并。这需要一些代码量，但能完全控制合并逻辑。
-
使用第三方库： 像Lodash这样的实用工具库提供了
_.merge()
或_.mergeWith()
这样的方法，它们能够方便地进行深度合并，并且通常考虑了各种边缘情况。在实际项目中，这往往是更省心且健壮的选择。
所以，当你处理包含嵌套对象或数组的数据时，一定要先问自己：我需要的是浅拷贝还是深拷贝？如果答案是深拷贝，那么请记住，原生的
...和
Object.assign()并不是你的终极解决方案，它们只是起点。
合并多个对象，除了两个，还有哪些高效方法？
合并两个对象是基础，但在实际应用中，我们经常需要合并三个、四个甚至更多个对象。好消息是，我们前面提到的两种主要方法——展开语法和
Object.assign()——都非常擅长处理这种情况，而且用法几乎一样直观。
先看展开语法：
const baseConfig = {
port: 3000,
env: 'development',
logging: true
};
const devConfig = {
env: 'development',
debug: true,
port: 8080 // 覆盖 baseConfig 的 port
};
const userOverrides = {
logging: false, // 覆盖 baseConfig 的 logging
debug: false // 覆盖 devConfig 的 debug
};
// 将所有对象按顺序展开，后面的对象会覆盖前面同名属性
const finalConfig = { ...baseConfig, ...devConfig, ...userOverrides };
console.log(finalConfig);
/*
{
port: 8080, // 被 devConfig 覆盖
env: 'development',
logging: false, // 被 userOverrides 覆盖
debug: false // 被 userOverrides 覆盖
}
*/这种链式的展开方式非常清晰，一眼就能看出合并的顺序和优先级。从左到右，后面的对象属性会覆盖前面的同名属性，这在处理多层配置或选项时非常方便。
接着是Object.assign()
：
const baseSettings = { theme: 'light', font: 'sans-serif' };
const userSettings = { theme: 'dark' };
const adminSettings = { permissions: ['all'], font: 'monospace' };
// Object.assign(target, source1, source2, ..., sourceN)
// 第一个参数是目标对象，后续所有参数都是源对象
const combinedSettings = Object.assign({}, baseSettings, userSettings, adminSettings);
console.log(combinedSettings);
/*
{
theme: 'dark', // 被 userSettings 覆盖
font: 'monospace', // 被 adminSettings 覆盖
permissions: ['all']
}
*/Object.assign()同样支持传入任意数量的源对象。它会按照参数的顺序，依次将每个源对象的可枚举属性复制到目标对象上。因此，越靠后的源对象，其属性的优先级越高。
从效率上讲，对于大多数日常使用场景，这两种方法在合并少量到中等数量的对象时，性能差异微乎其微，你完全可以根据个人偏好和团队规范来选择。展开语法通常被认为是更现代、更简洁的写法，尤其是在需要创建新对象时。而
Object.assign()在需要原地修改现有对象时，或者在旧版浏览器兼容性要求较高（虽然现在展开语法也基本普及了）的情况下，依然是可靠的选择。
总结一下，无论是合并两个还是多个对象，JavaScript都提供了简洁且高效的原生方法。关键在于理解它们的浅拷贝特性以及属性冲突的解决机制，这样才能在实际开发中避免不必要的“惊喜”。
