将数组数组转换为组合在一起的对象数组 JavaScript
javascriptweb developmentobject oriented programming更新于 2025/10/8 22:04:17
假设我们有一个二维数组，其中包含有关某些颜色和水果的数据，如下所示
const data = [ ['orange', 'fruit'], ['red', 'color'], ['green', 'color'], ['orange', 'color'], ['banana', 'fruit'], ['blue', 'color'], ['lemon', 'fruit'], ['mango', 'fruit'], ['lemon', 'color'], ];
我们必须编写一个函数，接受这个数组并返回一个数组，其中不同的水果和颜色按类别分组。
就像在这个例子中，我们只有两个类别，即"fruit"和‘color’，所以我们应该期望输出中出现一个由两个对象组成的数组，如下所示−
[
{
group: 'fruit',
value: [ 'orange', 'banana', 'lemon', 'mango' ]
},
{
group: 'color',
value:[ 'red', 'green', 'orange', 'blue', 'lemon' ]
}
]
注意 − 在这个例子中，我们只有两个类别，但我们需要编写一个适用于动态数量类别的解决方案，而不仅仅是两个。
所以，让我们为这个问题设计一个解决方案。我们将使用 Array.prototype.reduce() 方法，对于每个子数组，我们将检查是否存在现有组。如果该组存在，我们将新值推送到其 value 属性中，否则我们将为该组创建一个新对象并将其推送到数组中。
示例
const data = [
['orange', 'fruit'],
['red', 'color'],
['green', 'color'],
['orange', 'color'],
['banana', 'fruit'],
['blue', 'color'],
['lemon', 'fruit'],
['mango', 'fruit'],
['lemon', 'color'],
];
const groupData = arr => {
return arr.reduce((acc, val) => {
const [value, groupName] = val;
const groupIndex = acc.findIndex(el => el?.group === groupName);
if(groupIndex !== -1){
acc[groupIndex].value.push(value);
}else{
acc.push({
group: groupName,
value: [value]
});
}
return acc;
}, []);
};
console.log(groupData(data));
输出
控制台中的输出将是 −
[
{ group: 'fruit', value: [ 'orange', 'banana', 'lemon', 'mango' ] },
{
group: 'color',
value: [ 'red', 'green', 'orange', 'blue', 'lemon' ]
}
]
相关文章
有用资源
javascript 参考教程 - 该教程包含有关 javascript 的更多信息:https://www.cainiaomax.com/javascript/
