如何从不固定结构的数组中提取所有键作为表格表头？

实现思路 #

遍历数组内的每个对象，收集所有不重复的键作为表头，再为每个对象补全缺失字段（用-标记空值），最终生成结构统一的表格。

代码实现（JavaScript） #

const array = [
 {
  optionA: "QA1",
  optionB: "QB1",
  optionC: "QC1",
  optionD: "QD1",
 },
 {
  optionA: "QA2",
  optionB: "QB2",
  optionC: "QC2",
  optionD: "QD2",
  optionE: "QE2",
 },
 {
  optionA: "QA3",
  optionB: "QB3",
 }
];

// 收集所有不重复的选项键
const allOptionKeys = [...new Set(array.flatMap(item => Object.keys(item)))];
// 按键名排序，保证选项顺序一致
allOptionKeys.sort((a, b) => a.localeCompare(b));
// 转换为中文表头
const chineseHeaders = allOptionKeys.map(key => `${key.charAt(0).toUpperCase()}${key.slice(1)}`.replace('Option', '选项'));

// 生成统一结构的表格数据
const tableRows = array.map(item => {
  return allOptionKeys.map(key => item[key] || '-');
});

最终表格展示 #

内容的提问来源于stack exchange，提问作者Milind P. Chaudhari