JavaScript中如何映射数据集键到列配置并格式化列名？

1. 实现字符串格式化函数 #

先实现符合要求的格式化逻辑：把驼峰命名的字段转成首字母大写、单词间用空格分隔的格式，用正则表达式就能快速完成：

function formatHeaderName(key) {
  // 在每个大写字母前加空格，再将首字母转为大写
  return key.replace(/([A-Z])/g, ' $1')
            .replace(/^./, match => match.toUpperCase());
}

2. 映射数据源字段到columns数组 #

具体步骤：

• 提取数据源中单个对象的所有字段名（所有数据结构一致，取第一个对象即可）
• 遍历columns数组，跳过第一个复选框列，依次把字段名赋值给field，同时用格式化函数生成headerName

完整代码示例：

// 定义格式化函数
function formatHeaderName(key) {
  return key.replace(/([A-Z])/g, ' $1')
            .replace(/^./, match => match.toUpperCase());
}

// 预定义列配置数组
let columns=[
    {
        "field": "",
        "headerName": "",
        "filter": false,
        "checkboxSelection": true,
        "width": 30
    },
    {
        "field": "",
        "headerName": "",
        "width": 90,
        "suppressMenuHide": true,
        "cellStyle": {
            "white-space": "pre-wrap"
        },
        "rowHeight": 150
    },
    {
        "field": "",
        "headerName": "",
        "suppressMenuHide": true,
        "filterParams": {},
        "width": 130
    },
    {
        "field": "",
        "headerName": "",
        "width": 130,
        "suppressMenuHide": false
    },
    {
        "field": "",
        "headerName": "",
        "width": 130
    },
    {
        "field": "",
        "headerName": "",
        "minWidth": 80
    },
    {
        "field": "",
        "headerName": "",
        "width": 130
    }
]

// 数据源数组
let dataSet=[
    {
        "sector": "Bengaluru (BLR)",
        "sales": "high",
        "flightNumber": "08945",
        "ruleType": "Data rule",
        "failedRow": 70,
        "delta": 3
    },
    {
        "sector": "Abu dhabi (AUH)",
        "sales": "high",
        "flightNumber": "48646",
        "ruleType": "Rule set",
        "failedRow": 70,
        "delta": 3
    },
    {
        "sector": "Mumbai (BOM)",
        "sales": "high",
        "flightNumber": "65235",
        "ruleType": "Quality rule",
        "failedRow": 70,
        "delta": 3
    },
    {
        "sector": "Phuket (PKT)",
        "sales": "high",
        "flightNumber": "70946",
        "ruleType": "Data rule",
        "failedRow": 70,
        "delta": 4
    },
    {
        "sector": "Muscat (MCT)",
        "sales": "high",
        "flightNumber": "37546",
        "ruleType": "Rule set",
        "failedRow": 70,
        "delta": 13
    },
    {
        "sector": "Abu dhabi (AUH)",
        "sales": "high",
        "flightNumber": "48646",
        "ruleType": "Rule set",
        "failedRow": 70,
        "delta": 3
    },
    {
        "sector": "Mumbai (BOM)",
        "sales": "high",
        "flightNumber": "65235",
        "ruleType": "Quality rule",
        "failedRow": 70,
        "delta": 3
    },
    {
        "sector": "Mumbai (BOM)",
        "sales": "high",
        "flightNumber": "65235",
        "ruleType": "Quality rule",
        "failedRow": 70,
        "delta": 3
    },
    {
        "sector": "Phuket (PKT)",
        "sales": "high",
        "flightNumber": "70946",
        "ruleType": "Data rule",
        "failedRow": 70,
        "delta": 4
    },
    {
        "sector": "Muscat (MCT)",
        "sales": "high",
        "flightNumber": "37546",
        "ruleType": "Rule set",
        "failedRow": 70,
        "delta": 13
    }
]

// 提取数据源的字段列表
const dataFields = Object.keys(dataSet[0]);

// 给columns赋值（跳过第一个复选框列）
columns.forEach((col, index) => {
  if (index === 0) return;
  const fieldKey = dataFields[index - 1];
  col.field = fieldKey;
  col.headerName = formatHeaderName(fieldKey);
});

// 查看结果
console.log(columns);

结果说明 #

执行代码后，columns数组会完全匹配你给出的预期结构：

• 第一个复选框列保持原有配置不变
• 后续列的field对应数据源的原始字段名，headerName按规则完成格式化（比如flightNumber转为Flight Number）

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