JS中基于对象动态字段生成统一数组及表格列的实现需求

给定一组字段结构不统一的对象数组（如下方示例），需要提取所有出现过的字段名，转成大写后存入名为data的数组。

示例输入 #

[
  {
    id: 1,
    water: 'water',
  },
  {
    id: 2,
    fire: 'fire',
    earth: 'earth'
  }
]

实现方案 #

可以通过以下步骤实现：

• 遍历数组中的每个对象，收集所有字段名
• 对收集到的字段名去重
• 将每个字段名转换为大写格式
• 最终赋值给data数组

代码实现 #

// 模拟服务器返回的动态数据
const serverResponse = [
  { id: 1, water: 'water' },
  { id: 2, fire: 'fire', earth: 'earth' }
];

function getTableColumns(sourceData) {
  // 收集所有对象的字段名并扁平化数组
  const allFields = sourceData.flatMap(item => Object.keys(item));
  // 去重并转换为大写
  const uniqueUpperFields = [...new Set(allFields)].map(field => field.toUpperCase());
  return uniqueUpperFields;
}

// 生成目标数组
const data = getTableColumns(serverResponse);
console.log(data); // 输出: ["ID", "WATER", "FIRE", "EARTH"]

代码说明 #

• flatMap(item => Object.keys(item))：遍历每个对象，用Object.keys获取当前对象的所有字段名，再通过flatMap将多个字段数组合并为一个一维数组
• new Set(allFields)：利用Set的特性自动去除重复的字段名
• map(field => field.toUpperCase())：将所有字段名统一转换为大写格式
• 最终返回的数组即为包含所有唯一字段的目标数组data

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