JavaScript 数组对象合并：一种高效的教程-js教程-PHP中文网

JavaScript 数组对象合并：一种高效的教程

心靈之曲

发布： 2025-08-21 16:04:43

原创

396人浏览过

javascript 数组对象合并：一种高效的教程

本文旨在提供一种高效且易于理解的方法，用于合并 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 数组对象合并：一种高效的教程的详细内容，更多请关注php中文网其它相关文章！