JavaScript对象转数组：合并具有相同属性的对象

2024 年 03 月 11 日

74 次浏览

2377字数

在现代Web开发中，经常需要处理和转换数据结构，特别是在处理来自API的数据时。JavaScript作为前端开发的核心语言，提供了灵活的数据处理能力。本文将详细介绍如何在JavaScript中将对象数组转换为数组，并合并具有相同属性的对象。

首先，我们定义问题：给定一个对象数组，其中每个对象可能有一个或多个共同的属性。我们的目标是将这些对象合并成一个数组，合并的依据是它们共享的属性值。例如，如果两个对象具有相同的 id属性，则它们应被视为相同，并且它们的其他属性应该合并到一个数组中。

解决方案

要解决这个问题，我们可以遵循以下步骤：

创建一个新的空对象，用作中间数据结构，其中键是共有属性的值，值是所有共享该属性值的对象的数组。
遍历原始对象数组，对于每个对象：
- 检查中间对象是否已经有一个以当前对象的共有属性值为键的条目。
- 如果没有，创建一个新的数组，并将当前对象添加到数组中，然后将该数组添加到中间对象中，键是共有属性值。
- 如果有，直接将当前对象添加到相应键的数组中。
转换中间对象的值（数组）为最终结果数组。

代码示例

假设我们有一个对象数组，每个对象都有一个 id属性和一些其他属性。我们想根据 id属性合并这些对象。

const objectsArray = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 1, age: 30 },
  { id: 2, job: 'Developer' }
];

const mergeObjectsWithSameId = (array) => {
  const merged = array.reduce((acc, obj) => {
    if (!acc[obj.id]) {
      acc[obj.id] = [obj];
    } else {
      acc[obj.id].push(obj);
    }
    return acc;
  }, {});

  return Object.values(merged).map(group =>
    group.reduce((acc, obj) => {
      Object.keys(obj).forEach(key => {
        if (acc[key]) {
          if (!Array.isArray(acc[key])) {
            acc[key] = [acc[key]];
          }
          acc[key].push(obj[key]);
        } else {
          acc[key] = obj[key];
        }
      });
      return acc;
    }, {})
  );
};

console.log(mergeObjectsWithSameId(objectsArray));

这段代码首先使用 reduce函数遍历数组，创建一个以 id为键的对象，然后再次使用 reduce来合并具有相同 id的对象。Object.keys(obj).forEach循环确保了对象的每个属性都被考虑到合并过程中。如果一个属性在多个对象中出现，它的值会被合并成数组。