将数组数组转换为组合在一起的对象数组JavaScript

  • Z时代
  • 2024-01-10
  • 分类：综合

假设我们有一个二维数组，其中包含有关某些颜色和水果的数据

const data = [
   ['orange', 'fruit'],
   ['red', 'color'],
   ['green', 'color'],
   ['orange', 'color'],
   ['banana', 'fruit'],
   ['blue', 'color'],
   ['lemon', 'fruit'],
   ['mango', 'fruit'],
   ['lemon', '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 的全部内容， 来源链接： utcz.com/z/316492.html

回到顶部