Javascript - 通过带有标签的公共(public)值对对象数组进行分组

Question

我试图通过按特定值分组并将该值添加为标签并将其从新数组中的对象中取出来将对象数组转换为另一个对象数组。
输入:例如，我有这个对象数组:

let tech = [
  { id: 1, grouping: "Front End", value: "HTML" },
  { id: 2, grouping: "Front End", value: "React" },
  { id: 3, grouping: "Back End", value: "Node" },
  { id: 4, grouping: "Back End", value: "PHP" },
];

预期:我正在尝试弄清楚如何才能做到这一点，其中每个唯一分组和选项数组都有一个标签，其中包含该分组的值。

[
  {
    label: "Front End",
    options: [
      { id: 1, value: "HTML" },
      { id: 2, value: "React" },
    ],
  },
  {
    label: "Back End",
    options: [
      { id: 3, value: "Node" },
      { id: 4, value: "PHP" },
    ],
  },
]

我能达到的最接近的方法是使用 reduce 来按分组键进行分组:

const groupedTech = tech.reduce((acc, value) => {
  // Group initialization
  if (!acc[value.grouping]) {
    acc[value.grouping] = [];
  }
 
  // Grouping
  acc[value.grouping].push(value);
 
  return acc;
}, {});

这给了我这个:

{
  "Front End": [
    { id: 1, grouping: "Front End", value: "HTML" },
    { id: 2, grouping: "Front End", value: "React" },
  ],
  "Back End": [
    { id: 3, grouping: "Back End", value: "Node" },
    { id: 4, grouping: "Back End", value: "PHP" },
  ],
}

但这会返回对象而不是数组，并且不会删除分组值。我无法弄清楚如何正确分组，因为在对象数组中我还没有找到一种有效的方法来比较分组是否存在，如果存在则添加到该嵌套数组中。使用 .map() 之类的东西会更好吗？ ?感谢任何线索/学习!

Answer 1

您非常接近，只需将您获得的结果的键值条目包装在 map 中功能:

let tech = [
  { id: 1, grouping: "Front End", value: "HTML" },
  { id: 2, grouping: "Front End", value: "React" },
  { id: 3, grouping: "Back End", value: "Node" },
  { id: 4, grouping: "Back End", value: "PHP" },
];

const groupedTech = Object.entries(
  // What you have done
  tech.reduce((acc, { id, grouping, value }) => {
    // Group initialization
    if (!acc[grouping]) {
      acc[grouping] = [];
    }
    
    // Grouping
    // FIX: only pushing the object that contains id and value
    acc[grouping].push({ id, value });

    return acc;
  }, {})
).map(([label, options]) => ({ label, options }));

console.log(groupedTech);