js 数组对象合并相同属性值|极客笔记

js 数组对象合并相同属性值

在 JavaScript 中，我们经常会遇到需要合并数组对象中相同属性值的情况。有时候我们需要将具有相同属性值的对象合并成一个对象，以便更好地处理数据。本文将详细介绍如何使用 JavaScript 实现合并具有相同属性值的数组对象。

1. 合并相同属性值的数组对象

首先，我们需要准备一个包含多个对象的数组作为示例数据：

const data = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Alice', age: 28 },
  { id: 4, name: 'Alice', age: 27 },
  { id: 5, name: 'Bob', age: 32 },
];

现在，我们要做的是将具有相同 name 属性值的对象合并为一个对象，计算它们的 age 属性的平均值。我们可以按照以下步骤来实现：

创建一个空对象 result，用于存放合并后的结果；
遍历原始数组 data，将具有相同 name 属性值的对象合并为一个对象，并计算其 age 属性的平均值；
将合并后的对象添加到 result 中。

下面是具体的代码实现：

const result = data.reduce((acc, cur) => {
  if (!acc[cur.name]) {
    acc[cur.name] = { name: cur.name, age: cur.age, count: 1 };
  } else {
    acc[cur.name].age += cur.age;
    acc[cur.name].count++;
  }
  return acc;
}, {});

for (let key in result) {
  result[key].age /= result[key].count;
}

const mergedData = Object.values(result);

console.log(mergedData);

在这段代码中，我们使用了 reduce() 方法来遍历原始数组，并将具有相同 name 属性值的对象合并为一个对象，同时累计对应的 age 属性值和计数器。最后计算平均值，并将合并后的对象存入 mergedData 数组中。运行以上代码，会输出如下结果：

[
  { name: 'Alice', age: 26.666666666666668, count: 3 },
  { name: 'Bob', age: 31, count: 2 }
]

可以看到，我们成功地将具有相同 name 属性值的对象合并为一个对象，并计算了每个对象的 age 平均值。

2. 综合实例

为了更好地理解以上方法，我们可以结合实际应用场景，比如一个学生列表的数据处理。假设我们有如下学生信息的数组对象：

const students = [
  { id: 1, name: 'Alice', score: 85 },
  { id: 2, name: 'Bob', score: 90 },
  { id: 3, name: 'Alice', score: 88 },
  { id: 4, name: 'Alice', score: 92 },
  { id: 5, name: 'Bob', score: 95 },
];

我们想要按照姓名将学生成绩合并，并计算平均成绩，那么可以使用以下代码实现：

const result = students.reduce((acc, cur) => {
  if (!acc[cur.name]) {
    acc[cur.name] = { name: cur.name, totalScore: cur.score, count: 1 };
  } else {
    acc[cur.name].totalScore += cur.score;
    acc[cur.name].count++;
  }
  return acc;
}, {});

for (let key in result) {
  result[key].averageScore = result[key].totalScore / result[key].count;
  delete result[key].count;
  delete result[key].totalScore;
}

const mergedStudents = Object.values(result);

console.log(mergedStudents);

运行以上代码，会输出如下结果：

[
  { name: 'Alice', averageScore: 88.33333333333333 },
  { name: 'Bob', averageScore: 92.5 }
]

通过以上综合实例，我们成功地将学生成绩合并为一个对象，并计算了每个学生的平均成绩。

3. 总结

在 JavaScript 中，合并具有相同属性值的数组对象是一种常见的数据处理需求。通过使用 reduce() 方法，我们可以高效地实现这一功能。在实际应用中，可以根据具体情况定制合并逻辑，实现更加灵活的数据处理。

js 数组对象合并相同属性值