合并数组对象中键值相同对象：深度指南

2024-03-13 12:47:20

在JavaScript开发中，处理数组对象是一项常见任务。开发者经常会遇到需要将数组中具有相同键的对象合并为一个对象的情况，同时将这些对象的属性值合并为一个数组。本文将详细介绍如何实现这一目标，并提供详细的代码示例和操作步骤。

问题描述

假设我们有一个包含多个对象的数组，每个对象都有一个唯一的键（例如id），以及其他属性（例如name和age）。我们需要将这些对象按id分组，并将相同id的对象合并为一个对象，同时将它们的age属性值合并为一个数组。

const data = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 1, name: 'Alice', age: 26 },
  { id: 3, name: 'Charlie', age: 35 },
  { id: 2, name: 'Bob', age: 31 }
];

解决方案

方法一：使用 `reduce` 方法

reduce 方法是处理数组的一种强大工具，可以用来累积结果。我们可以使用 reduce 方法来遍历数组，并将具有相同键的对象合并。

const mergedData = data.reduce((acc, item) => {
  const existingItem = acc.find(i => i.id === item.id);
  if (existingItem) {
    existingItem.age.push(item.age);
  } else {
    acc.push({ ...item, age: [item.age] });
  }
  return acc;
}, []);

console.log(mergedData);

方法二：使用 `Map` 对象

Map 对象是一种键值对的集合，可以用来高效地查找和更新数据。我们可以使用 Map 对象来实现相同的功能。

const map = new Map();
data.forEach(item => {
  if (map.has(item.id)) {
    const existingItem = map.get(item.id);
    existingItem.age.push(item.age);
  } else {
    map.set(item.id, { ...item, age: [item.age] });
  }
});

const mergedData = Array.from(map.values());
console.log(mergedData);

方法三：使用第三方库

如果项目中已经使用了 Lodash 或其他类似的库，可以利用这些库提供的工具函数来简化代码。

const _ = require('lodash');

const mergedData = _.chain(data)
  .groupBy('id')
  .map((group, id) => ({
    id,
    name: group[0].name,
    age: group.map(item => item.age)
  }))
  .value();

console.log(mergedData);