JavaScript 合并和分组对象属性

在给定的问题中，我们需要借助JavaScript来合并和分组对象属性。在本文中，您将学习如何在JavaScript中合并和分组相同类型的属性。

理解问题

我们需要创建一个JavaScript方法，该方法将接收一个对象数组作为参数。创建的函数应该将所有具有name属性值的对象的属性进行分组。例如：

输入：

[
  {name: 'Adi', age: 22, color:'Black'},
  {name: 'Adi', weight: 40, height:6} ,
  {name: 'Mack', age: 20}
]

输出

[
 {name: 'Adi', age: 22, color:'Black', weight: 40, height:6},
 {name: 'Mack', age: 20}
]

步骤 – 使用reduce方法

下面提到的算法将给出一个逐步解决给定问题的过程。

第1步 ：首先定义一个名为groupedData的数据数组。在此应用程序中，该数组接收一个带有初始值为空对象的reduce()方法的调用。参数acc和curr被传递给回调函数。

第2步 ：每次使用reduce()方法时，回调函数首先使用解构从curr对象中移除state属性，然后使用展开操作符构建一个带有剩余属性的新对象。

第3步 ：回调函数然后确定是否已经将state属性作为键在acc对象中使用过。如果是，则将当前对象的population添加到已存在的状态中。如果没有，则将curr对象的状态和其他属性转移到acc对象的新条目中。

第4步 ：结果变量用于将groupedData对象转换回对象数组，使用Object.values()方法。

第5步 ：显示输出结果。

示例

// define a function to check power of 3
const data = [
  { city: "New York", state: "NY", population: 100000 },
  { city: "San Francisco", state: "CA", population: 50000 },
  { city: "Los Angeles", state: "CA", population: 200000 },
  { city: "San Diego", state: "CA", population: 10000 },
  { city: "Chicago", state: "IL", population: 150000 },
  { city: "Miami", state: "FL", population: 5000 }
];

const groupedData = data.reduce((acc, curr) => {
  const { state, ...rest } = curr;
  if (acc[state]) {
   acc[state] = { ...acc[state], population: acc[state].population + curr.population };
  } else {
   acc[state] = { state, ...rest };
  }
  return acc;
}, {});

const result = Object.values(groupedData);

console.log(result);

输出

[
  { state: 'NY', city: 'New York', population: 100000 },
  { state: 'CA', city: 'San Francisco', population: 260000 },
  { state: 'IL', city: 'Chicago', population: 150000 },
  { state: 'FL', city: 'Miami', population: 5000 }
]

步骤 – 使用forEach方法

使用forEach方法的算法步骤如下：

第1步： 在第一步中，首先定义一个具有城市、州和人口键的数组，并在其中放入一些值。然后，创建一个空数组，并将其命名为“groupedData”。

第2步： 在该程序中使用forEach()方法对数据数组进行操作，使用一个名为obj的单一参数的回调函数。

第3步： 回调函数利用解构将obj对象上的state属性在forEach()方法的每次迭代中移除，然后使用扩展运算符构建一个具有剩余属性的新对象。

第4步： 然后回调函数确定步骤四中是否曾将state属性用作groupedData对象的键。如果是，则将该州的人口增加当前条目的人口。如果不是，则将obj对象中的state和其他属性添加到groupedData对象的新条目中。

第5步： 使用Object.values()函数将groupedData对象转换回对象数组，并将其保存在result变量中。

示例

const data = [
  { city: "New York", state: "NY", population: 100000 },
  { city: "San Francisco", state: "CA", population: 50000 },
  { city: "Los Angeles", state: "CA", population: 200000 },
  { city: "San Diego", state: "CA", population: 10000 },
  { city: "Chicago", state: "IL", population: 150000 },
  { city: "Miami", state: "FL", population: 5000 }
];

const groupedData = {};

data.forEach((obj) => {
  const { state, ...rest } = obj;
  if (groupedData[state]) {
   groupedData[state].population += obj.population;
  } else {
   groupedData[state] = { state, ...rest };
  }
});

const result = Object.values(groupedData);

console.log(result);