如何在JavaScript中动态处理API返回JSON对象的可变字段名？

针对API字段可能随时变更的问题，推荐以下几种无需硬编码的实现方案：

1. 本地集中映射表 #

把服务器字段和本地固定使用的字段做映射，集中管理所有可变字段，后续字段变更仅需修改映射表：

// 集中管理字段映射，服务器字段变更时只改这里
const fieldMap = {
  localName: 'Name',
  localNumber: 'Number',
  localSelect: 'Select'
};

// 假设从API获取的原始数据
const apiResponse = {
  Name: '示例名称',
  Number: '98765',
  Select: '默认选项'
};

// 动态取值，业务代码用本地固定字段名
const userName = apiResponse[fieldMap.localName];
const userNumber = apiResponse[fieldMap.localNumber];

比如服务器把Name改成Title，只需将fieldMap.localName的值改为Title，业务逻辑完全不用调整。

2. 独立配置文件管理映射 #

如果字段数量较多，可将映射表放在单独的JSON配置文件中，便于批量维护：

创建api-field-mapping.json：

{
  "localName": "Name",
  "localNumber": "Number",
  "localSelect": "Select"
}

代码中导入使用：

import fieldMap from './api-field-mapping.json';

const userName = apiResponse[fieldMap.localName];

3. 适配器模式隔离API变更 #

编写适配器函数，将API原始数据转换为本地固定结构的对象，业务代码仅处理转换后的数据，彻底隔离API字段变更影响：

// 适配器函数，负责转换API数据格式
function transformApiData(rawData) {
  const fieldMap = {
    localName: 'Name',
    localNumber: 'Number',
    localSelect: 'Select'
  };
  return {
    name: rawData[fieldMap.localName],
    number: rawData[fieldMap.localNumber],
    select: rawData[fieldMap.localSelect]
  };
}

// 使用时先转换数据
const normalizedData = transformApiData(apiResponse);
// 业务代码直接使用固定字段
console.log(normalizedData.name, normalizedData.number);

后续API字段变更，仅需修改适配器函数内的映射规则即可。

4. TypeScript类型安全方案（TS项目适用） #

结合类型别名与映射类型，在保证动态映射的同时享受类型检查：

// 定义当前API返回的字段类型，变更时修改此处
type ApiResponseType = {
  Name: string;
  Number: string;
  Select: string;
};

// 本地字段到API字段的映射，保证类型安全
const fieldMap: Record<string, keyof ApiResponseType> = {
  localName: 'Name',
  localNumber: 'Number',
  localSelect: 'Select'
};

// API返回的数据
const apiResponse: ApiResponseType = {
  Name: 'TS示例',
  Number: '112233',
  Select: '选项C'
};

// 类型安全的动态取值
const userName = apiResponse[fieldMap.localName];

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