本文旨在提供一种高效且易于理解的方法，用于合并 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() 返回的键名：
触网万能商城系统，3年专注打磨一款产品，专为网络服务公司、建站公司、威客、站长、设计师、网络运营及营销人员打造，是一款超级万能建站利器，彻底告别代码编程和找模板，改模板，改代码的低效高成本方式，仅需一个人可服务无数客户，系统集万能官网+万能商城+万能表单+博客+新闻+分销...于一体，通过海量模块拖拽布局、万能组合和超级自定义功能，可以构建各种类型的响应式网站。
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() 通常是更好的选择，因为它提供了更好的性能。
