返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript对象合并的几种方法小结
  • 133
分享到

JavaScript对象合并的几种方法小结

JavaScript对象合并 2023-02-17 12:02:47 133人浏览 薄情痞子
摘要

目录1、使用 Object.assign() 方法2、使用解构赋值语法3、使用 Lodash 中的 merge() 方法4、for-in 循环 + 手动赋值5、使用 Object.k

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 对象合并内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaScript对象合并的几种方法小结

本文链接: https://lsjlt.com/news/196521.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作