JS数组属性提取：如何将学生成绩数组转换为适配图表的目标结构

核心实现思路 #

• 从原始数据中分离两个动态核心维度，全程不硬编码学科、学生名称：
  • 提取全量学生名单：遍历原始数组，取每个元素的Name属性值作为后续组装对象的动态键
  • 提取全量学科列表：遍历原始数组收集所有非Name字段的属性键，去重后作为每个目标行的subject值
• 逐学科遍历组装目标对象：对每个学科生成一个基础对象，设置subject属性后，依次将每个学生对应学科的分数动态挂载到该对象上，最终汇总成目标结构数组

可直接运行的转换代码 #

// 原始输入数组
const rawData = [
  {
    Name:"Alfred",
    French:15,
    English:13,
    Spanish:9
  },
  {
    Name:"Robert",
    French:5,
    English:43,
    Spanish:16
  },
  {
    Name:"Jonathon",
    French:15,
    English:32,
    Spanish:18
  }
]

function transformStructure(rawList) {
  // 提取所有学生名称
  const studentList = rawList.map(item => item.Name)
  // 动态提取所有学科key（排除Name字段，去重处理）
  const subjectList = [...new Set(
    rawList.flatMap(item => Object.keys(item).filter(key => key !== "Name"))
  )]
  // 逐学科组装目标结构
  return subjectList.map(subject => {
    const row = { subject }
    // 动态填充每个学生的对应学科分数
    rawList.forEach(student => {
      row[student.Name] = student[subject]
    })
    return row
  })
}

// 调用转换
const targetData = transformStructure(rawData)

适配优化说明 #

• 代码通过集合去重学科键，可兼容部分原始条目缺字段的场景，不会生成重复的学科行
• 自动适配原始数组的后续变动：新增学生、新增学科时，无需修改转换逻辑即可自动生成匹配的结构
• 若需要为缺失的分数设置默认值（比如0），可将动态赋值语句调整为兜底逻辑：

  row[student.Name] = student[subject] ?? 0
  

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