在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都提供了简洁且高效的原生方法。关键在于理解它们的浅拷贝特性以及属性冲突的解决机制，这样才能在实际开发中避免不必要的“惊喜”。
以上就是js 怎样合并两个对象的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1517338.html
微信扫一扫 
支付宝扫一扫 
