JavaScript/Vue.js 按对象键名前缀分组拆分数据的实现问题

你现有写法的错误点如下：

• filter是JavaScript数组的专属方法，你的源数据data为普通对象，直接调用会抛出类型错误
• 你用到的contains不是JS字符串的标准方法，且判断前缀用startsWith更精准，可避免键名中间出现目标字符串导致的误匹配
• 你仅筛选了对应前缀的键，还需要删除键名中的前缀部分，才能符合你预期的输出结构

该方案适配任意数量的前缀分组，后续新增前缀不需要修改逻辑：

const data = {
  "SCHOOL-ADMISSION_YEAR": "2021",
  "SCHOOL-SCHOOL_NAME": "ABC SCHOOL",
  "SCHOOL-SCHOOL_LOCATION": "NEWYORK",
  "ENROLLMENT-ADMISSION_YEAR": "2021",
  "ENROLLMENT-SUBMISSION_DATE": "2020-04-02",
  "ENROLLMENT-ENROLLMENT_DATE": "2020-06-02"
}

const groups = {}
// 遍历源对象所有键值对
Object.entries(data).forEach(([key, value]) => {
  // 按分隔符切割为前缀和新键名
  const [prefix, newKey] = key.split('-')
  // 不存在对应分组则初始化
  if (!groups[prefix]) groups[prefix] = {}
  // 赋值新键值对
  groups[prefix][newKey] = value
})

// 提取目标变量
const School = groups.SCHOOL
const Enrollment = groups.ENROLLMENT

如果你确定只有SCHOOL和ENROLLMENT两类前缀，也可以单独过滤赋值：

const School = Object.fromEntries(
  Object.entries(data)
    .filter(([key]) => key.startsWith('SCHOOL-'))
    .map(([key, value]) => [key.replace('SCHOOL-', ''), value])
)

const Enrollment = Object.fromEntries(
  Object.entries(data)
    .filter(([key]) => key.startsWith('ENROLLMENT-'))
    .map(([key, value]) => [key.replace('ENROLLMENT-', ''), value])
)

以上两种写法在Vue.js场景下无需额外适配，直接写入方法、计算属性等业务逻辑位置即可正常运行。

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