如何使用JavaScript将具有相同ID的数组元素合并到一个对象中?

如何使用javascript将具有相同id的数组元素合并到一个对象中?

JavaScript数组元素合并:将相同ID的元素合并到一个对象中

在数据处理中,经常需要将具有相同ID的数组元素合并成单个对象。本文提供一种JavaScript解决方案,将具有相同ID但属性不同的数组元素,转换成新的数组格式。

原始数据格式:

const list = [    { id: "202301", jine: 23, type: "晚餐" },    { id: "202301", jine: 87.5, type: "早餐" },    { id: "202301", jine: 1065.5, type: "中餐" },    { id: "202302", jine: 10, type: "晚餐" },    { id: "202302", jine: 181.5, type: "早餐" },    { id: "202302", jine: 633.5, type: "中餐" }];

目标数据格式:

const targetList = [    { id: "202301", jine1: 87.5, jine2: 1065.5, jine3: 23 },    { id: "202302", jine1: 181.5, jine2: 633.5, jine3: 10 }];

解决方案:

立即学习“Java免费学习笔记(深入)”;

我们将使用reduce方法实现数据转换。该方法迭代数组,将每个元素累积到一个结果对象中。

const result = Object.values(list.reduce((acc, curr) => {    const { id, jine, type } = curr;    if (!acc[id]) {        acc[id] = { id };    }    switch (type) {        case '早餐': acc[id].jine1 = jine; break;        case '中餐': acc[id].jine2 = jine; break;        case '晚餐': acc[id].jine3 = jine; break;    }    return acc;}, {}));console.log(result); // 输出目标数据格式

代码解释:

reduce方法: reduce方法迭代list数组,将每个元素累积到一个对象acc中。acc[id]: 使用id作为键,将数据存储到acc对象中。如果id不存在,则创建一个新的对象。switch语句: 根据type属性的值,将jine值分别赋值给jine1jine2jine3Object.values: 最后,使用Object.values方法将acc对象转换为数组,得到目标数据格式。

此方法清晰简洁,避免了使用外部库,直接利用JavaScript内置方法实现数据转换。 它也更易于扩展,如果需要处理更多类型的餐饮,只需在switch语句中添加更多case即可。

以上就是如何使用JavaScript将具有相同ID的数组元素合并到一个对象中?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1504068.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 02:31:33
下一篇 2025年12月20日 02:31:47

相关推荐

发表回复

登录后才能评论
关注微信