如何使用Object.groupBy根据动态变量对数据进行分组

嘿，我完全懂你现在遇到的困扰——你想根据用户选择的动态键来分组库存数据，但当前代码返回的结果里键是undefined，根本没达到预期的分组效果对吧？

问题出在你传给Object.groupBy的回调函数上：

({ key }) => key

这里的{ key }是在尝试解构对象中名为key的属性，但你的库存对象里根本没有key这个属性，只有Phase、Step、Task这些字段，所以自然拿到的都是undefined，导致所有数据都被分到了undefined这个键下面。

正确的写法 #

你需要用括号表示法来访问对象的动态属性，也就是根据变量key的值去取对象对应的属性。修改后的代码如下：

const inventory = [
  { Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" },
  { Phase: "Phase 1", Step: "Step 1", Task: "Task 2", Value: "10" },
  { Phase: "Phase 1", Step: "Step 2", Task: "Task 1", Value: "15" },
  { Phase: "Phase 1", Step: "Step 2", Task: "Task 2", Value: "20" },
  { Phase: "Phase 2", Step: "Step 1", Task: "Task 1", Value: "25" },
  { Phase: "Phase 2", Step: "Step 1", Task: "Task 2", Value: "30" },
  { Phase: "Phase 2", Step: "Step 2", Task: "Task 1", Value: "35" },
  { Phase: "Phase 2", Step: "Step 2", Task: "Task 2", Value: "40" }
];

let key = 'Phase';
// 用括号表示法访问动态属性
const result = Object.groupBy(inventory, (item) => item[key]);
console.log(result);

预期输出 #

运行这段代码后，你就能得到想要的分组结果了：

{
  "Phase 1": [
    { Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" },
    { Phase: "Phase 1", Step: "Step 1", Task: "Task 2", Value: "10" },
    { Phase: "Phase 1", Step: "Step 2", Task: "Task 1", Value: "15" },
    { Phase: "Phase 1", Step: "Step 2", Task: "Task 2", Value: "20" }
  ],
  "Phase 2": [
    { Phase: "Phase 2", Step: "Step 1", Task: "Task 1", Value: "25" },
    { Phase: "Phase 2", Step: "Step 1", Task: "Task 2", Value: "30" },
    { Phase: "Phase 2", Step: "Step 2", Task: "Task 1", Value: "35" },
    { Phase: "Phase 2", Step: "Step 2", Task: "Task 2", Value: "40" }
  ]
}

额外小提示 #

如果担心用户选择的键可能不存在于某些对象中，可以给个默认值，避免出现undefined的分组键：

const result = Object.groupBy(inventory, (item) => item[key] || 'Unknown');

这样那些没有对应键的条目就会被分到Unknown组里啦。

内容来源于stack exchange