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

本文将探讨如何在 JavaScript 中合并数组中的对象，特别是当这些对象拥有相同的日期或其他公共属性时。我们将分析一种常见的合并方法，指出其中潜在的陷阱，并提供更高效、简洁的替代方案。

问题分析：为何 Object.keys 和 hasOwnProperty 组合失效？

在尝试合并数组对象时，一个常见的错误出现在对 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) {
    console.log(Object.keys(item))
    for (k in Object.keys(item)) {
      console.log(k)
      if (item.hasOwnProperty(k)) {
        merged[idx][k] = item[k];
      }
    }
  }
});

这段代码的目的是遍历数组 cleaned，如果 merged 数组中已存在具有相同 date 属性的对象，则将当前对象 item 的属性合并到已存在的对象中。然而，问题出在 for...in 循环中，Object.keys(item) 返回的是一个包含对象 item 所有键名的数组。因此，循环变量 k 取到的是数组的索引值（0, 1, 2, ...），而不是对象 item 的键名。

由于 item 对象本身并不包含名为 "0", "1", "2" 等属性，item.hasOwnProperty(k) 始终返回 false，导致合并操作无法执行。

立即学习“Java免费学习笔记（深入）”；

解决方法：使用 for...of 循环

要解决这个问题，应该使用 for...of 循环来正确地迭代 Object.keys(item) 返回的键名数组：

for (let k of Object.keys(item)) {
  merged[idx][k] = item[k];
}

使用 for...of 循环，变量 k 将会依次取到 item 对象的实际键名，从而允许正确地将属性合并到 merged 数组中的对应对象。

先见AI

数据为基，先见未见

95

查看详情

补充说明：hasOwnProperty 的必要性

在上述修正后的代码中，hasOwnProperty 已经不再是必需的。Object.keys 方法只会返回对象自身的可枚举属性，因此无需额外检查属性是否属于对象自身。

更简洁的替代方案：利用 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 对象创建一个以 date 属性为键，空对象为值的映射。然后，它遍历 cleaned 数组，使用 Object.assign 将每个对象的属性合并到 Map 中对应 date 属性的对象中。最后，将 Map 中的值转换为数组，得到合并后的结果。

代码解析：

1. 创建 Map 对象： new Map(cleaned.map(item => [item.date, {}])) 使用 cleaned 数组创建一个 Map 对象，其中键为每个对象的 date 属性，值为一个空对象。这意味着对于每个不同的 date 值，Map 中都会创建一个对应的空对象。
2. 使用 Object.assign 合并属性： for (const item of cleaned) Object.assign(map.get(item.date), item); 遍历 cleaned 数组，对于每个对象 item，使用 map.get(item.date) 获取 Map 中与 item.date 对应的对象，然后使用 Object.assign 将 item 的所有属性合并到该对象中。Object.assign 会修改第一个参数（即 map.get(item.date) 返回的对象），将后续参数（即 item）的属性复制到第一个参数中。如果存在相同的属性名，则后续参数的属性值会覆盖第一个参数的属性值。
3. 将 Map 值转换为数组： const merged = [...map.values()]; 使用扩展运算符 ... 将 map.values() 返回的 Map 迭代器转换为数组。map.values() 返回一个包含 Map 对象中所有值的迭代器，这些值就是通过 Object.assign 合并后的对象。

总结：

• 使用 for...of 循环可以正确地迭代 Object.keys 返回的键名数组，避免因错误地使用索引值而导致属性合并失败。
• Map 和 Object.assign 提供了一种更简洁、高效的数组对象合并方案，尤其适用于需要基于公共属性进行合并的场景。

在实际开发中，应根据具体需求选择合适的合并方法。对于简单的合并操作，修正后的 for...in 循环可能已经足够。但对于更复杂的需求，Map 和 Object.assign 往往能提供更优雅、高效的解决方案。

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