JavaScript 对象合并的几种方法小结
更新时间：2023年02月17日 09:06:44 作者：忧郁的蛋~
本文主要介绍了JavaScript 对象合并的几种方法小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
JavaScript 中有多种方法可以合并对象。
1、使用 Object.assign() 方法
它可以将一个或多个对象的属性复制到目标对象中。例如：
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const obj3 = Object.assign({}, obj1, obj2);
console.log(obj3); // { a: 1, b: 3, c: 4 }
这里我们使用空对象({})作为第一个参数，避免直接修改第一个对象。
2、使用解构赋值语法
这种方法会在合并对象时保留键值相同的对象的属性，例如：
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { a: 1, b: 3, c: 4 }
这里使用了扩展运算符，可以将一个对象的属性解构到另一个对象中。
3、使用 Lodash 中的 merge() 方法
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const obj3 = _.merge(obj1, obj2);
console.log(obj3); // { a: 1, b: 3, c: 4 }
4、for-in 循环 + 手动赋值
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const obj3 = {};
for (const key in obj1) {
obj3[key] = obj1[key];
}
for (const key in obj2) {
obj3[key] = obj2[key];
}
console.log(obj3); // { a: 1, b: 3, c: 4 }
5、使用 Object.keys() 和 Array.forEach() 方法
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const obj3 = {};
Object.keys(obj1).forEach(key => {
obj3[key] = obj1[key];
});
Object.keys(obj2).forEach(key => {
obj3[key] = obj2[key];
});
console.log(obj3); // { a: 1, b: 3, c: 4 }
最后需要提醒的是，在合并对象时如果键值相同的对象属性类型不同，例如一个为字符串类型，一个为数值类型，会覆盖之前的属性，因此需要根据项目需求做出相应的处理。
此外，如果需要对合并对象的属性进行特殊处理，例如合并对象的属性值是一个数组，需要合并成一个新数组，可以使用 Array.concat() 方法。
const obj1 = { a: [1, 2] };
const obj2 = { a: [3, 4] };
const obj3 = Object.assign({}, obj1, {
a: obj1.a.concat(obj2.a)
});
console.log(obj3); // { a: [1, 2, 3, 4] }
或者使用扩展运算符
const obj1 = { a: [1, 2] };
const obj2 = { a: [3, 4] };
const obj3 = {...obj1, a: [...obj1.a, ...obj2.a]}
console.log(obj3); // { a: [1, 2, 3, 4] }
此外，如果需要对合并对象的属性值进行进一步的处理，如去重、排序等，可以使用 Array.filter()、Array.sort() 等方法。
到此这篇关于JavaScript 对象合并的几种方法小结的文章就介绍到这了,更多相关JavaScript 对象合并内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了js获取json元素数量的方法,可实现对json元素数量的统计功能,具有一定参考借鉴价值,需要的朋友可以参考下2015-01-01
网站登录为了更好的用户体验都会在输入密码的时候检测是否开启大写，这样有助于提醒用户,需要学习的朋友可以参考下2012-12-12
这篇文章主要介绍了JS实现简单面向对象的颜色选择器,以完整实例形式分析了JavaScript基于面向对象实现颜色选择器的具体步骤与实现技巧,需要的朋友可以参考下2016-04-04
微信小程序目前的火热程度相信不用多言，最近利用空余时间用小程序实现了个动态的登录页效果，所以下面这篇文章主要给大家介绍了利用微信小程序实现登录页云层漂浮动画效果的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。2017-05-05
这篇文章主要介绍了JavaScript设计模式之建造者模式,结合实例形式分析了设计模式中建造者模式的概念、功能及JavaScript实现与使用建造者模式的相关操作技巧,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了微信小程序uploadFile接口实现文件上传流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
js中对于TextArea的选中区域后进行处理的代码，需要的朋友可以参考下。2010-12-12
前端时间刚好使用了百度地图的js api定位获取用户当前经纬度并获取当前详细位置的功能,为了方便下次找起来方便一些自己在这里记录一下,这篇文章主要给大家介绍了关于JS获取经纬度并根据经纬度得到城市信息的相关资料,需要的朋友可以参考下2023-11-11
javascript转换字符串为dom对象（字符串动态创建dom）
那么今天的目的就是教大家怎么去实现一个这样的方法用来把字符串直接转换为标准的dom对象2010-05-05
这篇文章主要介绍了js实现无缝滚动特效，结合已学知识进行扩展性练习，感兴趣的朋友可以参考一下2015-12-12
最新评论