JavaScript 对象怎么合并

早上整理购物清单时,把手机备忘录和便签APP里的内容凑到一起,就像生活里常做的“合并”小事——编程里的JavaScript也有类似需求:把两个或多个对象的内容合并到一起,方便统一管理数据。

最常用的“一键打包”:ES6的Object.assign

就像你把零钱、纸币都塞进一个新钱包,Object.assign是JavaScript专门做合并的“标准工具”。它的用法很简单:Object.assign(新对象, 要合并的对象1, 要合并的对象2...)。

JavaScript 对象怎么合并

举个生活化的例子:你有朋友A和朋友B,A的爱好是“篮球”,B的爱好是“画画”,想把两人的爱好合并成一个新的“共同爱好清单”,就可以这么写:

`javascript

const friendA = { hobby: '篮球' };

const friendB = { hobby: '画画', drink: '奶茶' };

const commonHobby = Object.assign({}, friendA, friendB);

// 结果:{ hobby: '画画', drink: '奶茶' }

`

这里要注意一个小细节:如果两个对象有相同的属性,比如都有hobby,后面的对象会覆盖前面的——就像B的爱好“画画”会把A的“篮球”替换掉,最终取最新的内容。

另外,Object.assign是“浅合并”,意思是如果对象里嵌套了另一个对象,那嵌套的部分还是共用原对象的引用。比如:

`javascript

const userA = { info: { age: 25 } };

const userB = { info: { gender: '女' } };

const mergedUser = Object.assign({}, userA, userB);

mergedUser.info.gender = '男';

// 这时候userA.info.gender也会变成'男',因为嵌套的info是同一个引用

`

就像你把两个盒子合并,外面的包装是新的,但盒子里的小格子还是原来的,改小格子的内容,原来的盒子也会变。

更灵活的“解构重组”:展开运算符

ES6还提供了对象展开运算符...,相当于把对象里的属性“拆出来”,再重新组合成新对象,用法比Object.assign更直观,和你把衣服从两个衣柜拿出来放进新衣柜的逻辑一样:

`javascript

const fruits = { apple: '红', banana: '黄' };

const drinks = { milk: '白', tea: '绿' };

const combined = { ...fruits, ...drinks };

// 结果:{ apple: '红', banana: '黄', milk: '白', tea: '绿' }

`

和Object.assign一样,后面的属性会覆盖前面的同名属性,比如把{ ...drinks, ...fruits }放在后面,最终的属性就会变成水果的内容。它同样是浅合并,嵌套对象的问题和Object.assign一致。

特殊情况的处理:深合并嵌套对象

如果需要合并的对象里有嵌套的内容,改新对象不影响原对象,就得用“深合并”。比如你有两个用户的详细信息,都有嵌套的address地址,合并后改新用户的地址,不能影响原用户。

这时候要么自己写递归函数处理(就像把每个小格子的内容都复制到新盒子,不是只搬盒子),要么用成熟的工具库(比如Lodash的_.merge)。举个简单的递归例子理解逻辑:

`javascript

function deepMerge(target, source) {

for (let key in source) {

if (source[key] instanceof Object && !Array.isArray(source[key])) {

// 如果属性是嵌套对象,递归合并

target[key] = deepMerge(target[key] || {}, source[key]);

} else {

// 普通属性直接覆盖

target[key] = source[key];

}

}

return target;

}

const user1 = { address: { city: '北京' } };

const user2 = { address: { zip: '100000' } };

const mergedUser = deepMerge({}, user1, user2);

// mergedUser.address.city是北京,zip是100000,改它不会影响user1

`

这种方式就像把每个格子里的小物件都复制一份,新盒子的内容和原来的完全分开,不会互相干扰。

合并JavaScript对象是日常开发里的高频操作,选哪种方法主要看需求:简单合并用Object.assign或展开运算符就够了,涉及嵌套对象的话再考虑深合并。就像整理家务,小杂物合并用收纳箱就行,大件家具就得小心挪动不影响原有布局——选对方法,就能轻松搞定对象合并的问题。

上一篇 C / C++ 入门必知:从基础语法到实用编程技巧的全面科普