本文旨在帮助开发者理解和掌握 JavaScript 中合并数组对象的方法，特别是当数组中的对象具有相同属性值时。我们将深入探讨一种常见的合并方法，分析其潜在问题，并提供更简洁高效的替代方案，帮助你编写更健壮的 JavaScript 代码。
在 JavaScript 开发中，经常会遇到需要将数组中具有相同属性值的对象进行合并的场景。例如，一个数组可能包含多个具有相同日期的对象，每个对象包含不同的数据，我们需要将这些对象合并成一个，以便更方便地进行数据处理。
常见合并方法及问题分析
一种常见的做法是使用 forEach 循环遍历数组，并使用 some 方法检查是否已经存在具有相同属性值的对象。如果不存在，则将当前对象添加到合并后的数组中；如果存在，则将当前对象的属性添加到已存在的对象中。
以下是一个示例代码：
立即学习“Java免费学习笔记（深入）”；
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}];
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];
}
}
}
});
console.log(merged);这段代码看起来似乎可以工作，但实际上存在一个潜在的问题。在 for...in 循环中，我们使用 Object.keys(item) 获取对象的所有键，然后使用索引 k 访问这些键。然而，k 实际上是数组 Object.keys(item) 的索引，而不是对象 item 的属性名。因此，item.hasOwnProperty(k) 总是返回 false，导致对象的属性无法被添加到合并后的对象中。
正确的做法是使用 for...of 循环遍历 Object.keys(item)，这样 k 才能正确地表示对象 item 的属性名。此外，由于 Object.keys 只会返回对象自身的可枚举属性，因此 hasOwnProperty 的检查是不必要的。
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}];
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];
}
}
});
console.log(merged);更高效的替代方案：使用 Map 和 Object.assign
虽然上述修复后的代码可以正确地合并数组对象，但它的效率并不高。每次迭代都需要使用 some 方法遍历合并后的数组，时间复杂度为 O(n^2)。
为了提高效率，我们可以使用 Map 数据结构来存储合并后的对象。Map 允许我们使用任意值作为键，并且查找操作的时间复杂度为 O(1)。
以下是使用 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 方法将数组转换为一个 Map 对象，其中键为对象的 date 属性，值为一个空对象。然后，使用 for...of 循环遍历数组，并使用 Object.assign 方法将当前对象的属性合并到 Map 对象中对应键的值中。最后，使用 ... 扩展运算符将 Map 对象的值转换为一个数组。
这种方法的优点是效率高，时间复杂度为 O(n)。此外，代码也更加简洁易懂。
总结
在 JavaScript 中合并数组对象时，需要注意以下几点：
- 避免使用错误的循环方式，例如 for...in 循环遍历 Object.keys 的返回值。
- 使用 Map 数据结构可以提高合并效率。
- Object.assign 方法可以方便地将一个对象的属性合并到另一个对象中。
掌握这些技巧可以帮助你编写更健壮和高效的 JavaScript 代码。
