javascript - 基于对象数组中唯一键的分组

Question

我正在做一个小型的 React 项目，此时我陷入了困境。我需要根据数组对象键进行分组。

下面是数组：

   let addOnFeatures = [
    {"name": "feature1", id: 101, cost: 100},
    {"name": "feature2", id: 102, cost: 200},
    {"name": "feature1", id: 103, cost: 300},
    {"name": "feature3", id: 104, cost: 40}
    ]

我需要根据名称键进行分组，以便与通用名称相关的每个 id 都应显示在其自己的选项卡上。

预期输出应该像

*uniqueFeaturename
id: cost

例子：

 1. feature1
   101 : 100
   103 : 300
 2. feature2
    102 : 200
 3. feature3
    104: 40

标签： javascriptreactjsecmascript-6

Answer 1

只需使用Array.prototype.reduce并向对象添加元素，例如

let addOnFeatures = [
    {"name": "feature1", id: 101, cost: 100},
    {"name": "feature2", id: 102, cost: 200},
    {"name": "feature1", id: 103, cost: 300},
    {"name": "feature3", id: 104, cost: 40}
]

const res = addOnFeatures.reduce((acc, item) => {
   if(acc[item.name]) {
      acc[item.name] = {...acc[item.name], [item.id]: item.cost};
   } else {
      acc[item.name] = {[item.id]: item.cost};
   }
   return acc;
}, {});

console.log(res);