极客教程JavaScript 如何根据共同属性将对象分组为对象数组
在本文中，我们将试图理解如何轻松根据共同属性将对象分组为对象数组，并且用JavaScript的示例来帮助解释。根据共同属性将对象分组为对象数组，在数据共享属性上组织数据以实现高效的数据操作。
有几种可以用于根据共同属性将对象分组为数组中对象的方法：
- 使用Array.filter()方法
- 使用Object.values()
- 使用reduce()方法
- 使用for…of循环
- 使用forEach()方法
我们将探讨上述所有方法，并通过示例来演示它们的基本实现。
方法1：使用Array.filter()方法
在这种方法中，我们将创建一个包含多个对象的数组，然后使用Array.filter()方法从完整的对象数组中筛选出某些值。
语法：
array.filter(callback(element, index, arr), thisValue);
示例： 在这个示例中，我们使用上面解释的方法。
Javascript
let fruits = [
{
fruit_name: "Apple",
fruit_color: "Red",
},
{
fruit_name: "Pomegranate",
fruit_color: "Red",
},
{
fruit_name: "Grapes",
fruit_color: "Green",
},
{
fruit_name: "Kiwi",
fruit_color: "Green",
},
];
let filtered_fruits = fruits.filter((fruit) =>
fruit.fruit_color === "Red");
console.log(filtered_fruits);
输出
[
{ fruit_name: 'Apple', fruit_color: 'Red' },
{ fruit_name: 'Pomegranate', fruit_color: 'Red' }
]
方法2：使用Object.values()
在这个方法中，我们将使用之前创建的包含多个对象的相同数组，并且在这里我们将创建另一个函数来负责包含上述问题陈述的逻辑。
然后，我们逻辑的第一部分将使用 Object.values() 方法，该方法实际上会为我们累积所有对象的值，然后我们将使用 Array.reduce() 方法将我们的数组减少为对象，然后使用 nullish coalescing operator (??) 我们将在累加器值（reduce方法的一部分）中添加属性值，或者我们将添加一个空数组代替它（[ ]）。
我们逻辑的第二部分说我们必须将当前值推入包含先前添加值的累加器值本身，然后最后，我们将返回累加器值本身。
语法：
Object.values(obj)
示例：
Javascript
let fruits = [
{
fruit_name: "Apple",
fruit_color: "Red",
},
{
fruit_name: "Pomegranate",
fruit_color: "Red",
},
{
fruit_name: "Grapes",
fruit_color: "Green",
},
{
fruit_name: "Kiwi",
fruit_color: "Green",
},
];
let groupingViaCommonProperty = Object.values(
fruits.reduce((acc, current) => {
acc[current.fruit_color] = acc[current.fruit_color] ?? [];
acc[current.fruit_color].push(current);
return acc;
}, {})
);
console.log(groupingViaCommonProperty);
输出
[
[
{ fruit_name: 'Apple', fruit_color: 'Red' },
{ fruit_name: 'Pomegranate', fruit_color: 'Red' }
],
[
{ fruit_name: 'Grapes', fruit_color: 'Green' },
{ fruit_name: 'Kiwi', frui...
方法3：使用 reduce() 方法
在JavaScript中，reduce() 方法将一个函数应用于数组的每个元素，累积一个单一结果，并返回最终输出。
语法：
array.reduce( function(total, currentValue, currentIndex, arr),
initialValue );
示例：
在这个示例中，我们使用reduce()方法创建一个包含相同颜色的水果数组的数组。resultArray记录了分组的水果。
Javascript
const fruits = [
{
fruit_name: "Apple",
fruit_color: "Red",
},
{
fruit_name: "Pomegranate",
fruit_color: "Red",
},
{
fruit_name: "Grapes",
fruit_color: "Green",
},
{
fruit_name: "Kiwi",
fruit_color: "Green",
},
];
const groupedByColor = fruits.reduce((acc, fruit) => {
const color = fruit.fruit_color;
(acc[color] = acc[color] || []).push(fruit);
return acc;
}, {});
const resultArray = Object.values(groupedByColor);
console.log(resultArray);
输出
[
[
{ fruit_name: 'Apple', fruit_color: 'Red' },
{ fruit_name: 'Pomegranate', fruit_color: 'Red' }
],
[
{ fruit_name: 'Grapes', fruit_color: 'Green' },
{ fruit_name: 'Kiwi', fruit_color: 'Green' }
]
]
方法4：使用for…of循环
语法：
for ( variable of iterableObjectName) {
...
}
在JavaScript中，for…of循环可用于迭代可迭代对象，例如数组、字符串、映射、集合等。我们可以利用它根据共同属性将对象分组到一个数组中。
示例： 在这个示例中，我们使用上面解释的方法。
Javascript
const fruits = [
{
fruit_name: "Apple",
fruit_color: "Red",
},
{
fruit_name: "Pomegranate",
fruit_color: "Red",
},
{
fruit_name: "Grapes",
fruit_color: "Green",
},
{
fruit_name: "Kiwi",
fruit_color: "Green",
},
];
const groupedByColor = {};
for (const fruit of fruits) {
const color = fruit.fruit_color;
if (!groupedByColor[color]) {
groupedByColor[color] = [fruit];
} else {
groupedByColor[color].push(fruit);
}
}
const resultArray = Object.values(groupedByColor);
console.log(resultArray);
输出：
[
[
{ fruit_name: 'Apple', fruit_color: 'Red' },
{ fruit_name: 'Pomegranate', fruit_color: 'Red' }
],
[
{ fruit_name: 'Grapes', fruit_color: 'Green' },
{ fruit_name: 'Kiwi', fruit_color: 'Green' }
]
]
方法5：使用 forEach()
通过使用 JavaScript 中的 forEach() 方法，我们可以遍历数组中的每个元素，并根据共同的属性对对象进行分组。
语法：
array.forEach(callback(element, index, arr), thisValue)
示例： 在这个示例中，forEach()循环遍历fruits数组中的每个水果。它检查fruit_color属性，在groupedByColor对象中如果color不存在，则创建一个空数组，并根据水果的颜色将其推入对应的数组中。
JavaScript
const fruits = [
{
fruit_name: "Apple",
fruit_color: "Red",
},
{
fruit_name: "Pomegranate",
fruit_color: "Red",
},
{
fruit_name: "Grapes",
fruit_color: "Green",
},
{
fruit_name: "Kiwi",
fruit_color: "Green",
},
];
const groupedByColor = {};
fruits.forEach((fruit) => {
const color = fruit.fruit_color;
groupedByColor[color] = groupedByColor[color] || [];
groupedByColor[color].push(fruit);
});
const resultArray = Object.values(groupedByColor);
console.log(resultArray);
输出：
[
[
{ fruit_name: 'Apple', fruit_color: 'Red' },
{ fruit_name: 'Pomegranate', fruit_color: 'Red' }
],
[
{ fruit_name: 'Grapes', fruit_color: 'Green' },
{ fruit_name: 'Kiwi', fruit_color: 'Green' }
]
]