JavaScript 数组对象合并：高效方法与常见问题解析-js教程-PHP中文网

JavaScript 数组对象合并：高效方法与常见问题解析

碧海醫心

发布： 2025-08-21 17:44:21

原创

528人浏览过

javascript 数组对象合并：高效方法与常见问题解析

本文旨在帮助开发者理解和掌握 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)。

先见AI

数据为基，先见未见

查看详情

为了提高效率，我们可以使用 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 代码。

以上就是JavaScript 数组对象合并：高效方法与常见问题解析的详细内容，更多请关注php中文网其它相关文章！