本文旨在提供一种高效且易于理解的方法，用于合并 JavaScript 数组中的对象，特别是当这些对象共享某个公共属性（如日期）时。我们将深入探讨常见错误，并提供优化的代码示例，帮助开发者避免陷阱，实现高效的数据整合。我们将重点介绍如何使用 Object.keys 和 Object.assign 来简化合并过程，并提供可直接使用的代码片段。
在 JavaScript 开发中，经常会遇到需要合并数组中具有相同属性值的对象的情况。例如，你可能有一个包含日期、访问量和里程数的对象数组，你需要将具有相同日期的对象合并成一个，以便更方便地进行数据分析和展示。
理解问题：为什么我的代码没有按预期工作？
一个常见的错误是使用 for…in 循环遍历 Object.keys() 返回的索引，而不是实际的键名。考虑以下代码片段：
var merged = [];cleaned.forEach(function(item) { var idx; var found = merged.some(function(el, i) { idx = el.date === item.date ? i : null; return el.date === item.date; }); if (!found) { merged.push(item); } else if (idx !== null) { for (k in Object.keys(item)) { if (item.hasOwnProperty(k)) { merged[idx][k] = item[k]; } } }});
在这个例子中，k 的值将是 Object.keys(item) 返回数组的索引（0, 1, 2…），而不是 item 对象的实际属性名。因此，item.hasOwnProperty(k) 始终返回 false，导致属性无法被添加到合并后的对象中。
立即学习“Java免费学习笔记（深入）”；
解决方案：使用 for…of 循环
要解决这个问题，应该使用 for…of 循环来正确地迭代 Object.keys() 返回的键名：
var merged = [];cleaned.forEach(function(item) { var idx; var found = merged.some(function(el, i) { idx = el.date === item.date ? i : null; return el.date === item.date; }); if (!found) { merged.push(item); } else if (idx !== null) { for (let k of Object.keys(item)) { merged[idx][k] = item[k]; } }});
在这个修改后的代码中，k 将会是 item 对象的实际属性名，例如 “date”, “visits”, “miles” 等。 这样就可以正确地将属性添加到合并后的对象中。
此外，由于 Object.keys() 只会返回对象自身的可枚举属性，因此不再需要 hasOwnProperty 检查。
优化方案：使用 Map 和 Object.assign
更简洁和高效的解决方案是使用 Map 数据结构和 Object.assign() 方法。 Map 可以根据日期快速查找和存储合并后的对象，而 Object.assign() 可以轻松地将属性从一个对象复制到另一个对象。
const cleaned = [{data: {hours: ["2"],timeIn: ["2023-05-01T18:00:00Z"],timeOut: ["2023-05-01T20:00:00Z"],type: ["Client"]},date: "5/1/2023",entries: 2}, {data: {hours: [2, 2],timeIn: ["2023-05-10T18:00:00Z", "2023-05-10T16:00:00Z"],timeOut: ["2023-05-10T20:00:00Z", "2023-05-10T18:00:00Z"],type: ["Client"]},date: "5/10/2023",entries: 4}, {date: "5/1/2023",visits: 2}, {date: "5/10/2023",visits: 4}, {date: "5/1/2023",miles: 20}, {date: "5/10/2023",miles: 40}];const map = new Map(cleaned.map(item => [item.date, {}]));for (const item of cleaned) Object.assign(map.get(item.date), item);const merged = [...map.values()];console.log(merged);
这段代码首先创建一个 Map 对象，其中键是日期，值是空对象。然后，它遍历 cleaned 数组，并使用 Object.assign() 将每个对象的属性合并到 Map 中对应日期的对象中。最后，它将 Map 中的所有值转换为一个数组，即合并后的结果。
总结
合并 JavaScript 数组中的对象是一个常见的任务，但如果不小心，很容易犯错。通过理解 for…in 循环的局限性，并使用 for…of 循环或 Map 和 Object.assign() 的组合，你可以编写出更健壮和高效的代码。 选择哪种方法取决于你的具体需求和性能考虑。 对于大型数据集，使用 Map 和 Object.assign() 通常是更好的选择，因为它提供了更好的性能。
以上就是JavaScript 数组对象合并：一种高效的教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1516824.html
微信扫一扫 
支付宝扫一扫 
