如何高效基于Vuetify事件日志数据表生成v-select选项数组

这里提供一种简洁且性能高效的实现方式，仅需少量代码就能完成转换：

// 原始事件日志数组
const eventLog = [
  { id: 1, actionBy: "John", eventAction: "CREATED", Description: "", actionDate: "2022-09-02T10:31:57.223765" },
  { id: 2, actionBy: "Anna", eventAction: "MODIFIED", Description: "", actionDate: "2022-09-07T13:44:29.892831" },
  { id: 3, actionBy: "Eric", eventAction: "REMOVE_IMAGE", Description: "Test description", actionDate: "2022-09-07T13:44:39.800381" },
  { id: 4, actionBy: "Sysadmin", eventAction: "REMOVE_IMAGE", Description: "Test description", actionDate: "2022-09-08T09:21:29.272312" },
  { id: 5, actionBy: "Sysadmin", eventAction: "MODIFIED", Description: "Test description", actionDate: "2022-09-08T09:21:54.991851" },
  { id: 6, actionBy: "Sysadmin", eventAction: "REMOVE_IMAGE", Description: "Test description", actionDate: "2022-09-08T13:55:00.469676" }
];

// 转换为v-select所需的选项数组
const selectOptions = Object.entries(
  eventLog.reduce((acc, { eventAction }) => {
    acc[eventAction] = (acc[eventAction] || 0) + 1;
    return acc;
  }, {})
).map(([value, count]) => ({ value, count }));

逻辑拆解 #

1. 统计事件类型次数：用Array.reduce()遍历原始数组，以eventAction作为统计对象的键，累计对应类型的出现次数，得到形如{ CREATED: 1, MODIFIED: 2 }的统计结果。
2. 转换为目标格式：通过Object.entries()将统计对象拆分为键值对数组，再用Array.map()把每个键值对映射为{ value, count }的结构，完全匹配Vuetify v-select的选项要求。

优势说明 #

• 性能高效：仅对原始数组做一次遍历，后续转换操作时间复杂度为O(n)，整体性能最优。
• 代码简洁：链式调用逻辑清晰，无冗余代码，可读性强、易维护。

内容的提问来源于stack exchange，提问作者Juraj