本文详解如何将键值对结构的 api 响应（如 { akash: { url, count }, aptos: { url, count } }）转换为两种常用格式：一是为每个子对象注入 name 字段并保留原始键结构；二是扁平化为带 name 的对象数组。提供可直接运行的 javascript 实现与关键注意事项。
本文详解如何将键值对结构的 api 响应（如 { akash: { url, count }, aptos: { url, count } }）转换为两种常用格式：一是为每个子对象注入 name 字段并保留原始键结构；二是扁平化为带 name 的对象数组。提供可直接运行的 javascript 实现与关键注意事项。
在实际前端开发中，我们常遇到后端返回的「以名称为键的对象字面量」结构（即 Record<string, T>），但业务逻辑往往需要显式地将键名作为字段（如 name）嵌入每个子对象中——这既便于列表渲染、搜索过滤，也符合多数 UI 组件（如 Ant Design Table、Vue 3 的 v-for）对规范数组数据的要求。
✅ 方案一：保持对象结构，为每个子对象注入 name
使用 for...in 遍历源对象的自有可枚举属性，并借助展开运算符（...）安全合并原有属性与新增的 name: key：
const apiResponse = {
akash: { url: "127.0.0.1", count: 12 },
aptos: { url: "127.0.0.2", count: 54 }
};
const enrichedObject = {};
for (const key in apiResponse) {
if (Object.prototype.hasOwnProperty.call(apiResponse, key)) {
enrichedObject[key] = { ...apiResponse[key], name: key };
}
}
console.log(enrichedObject);
// → {
// akash: { name: "akash", url: "127.0.0.1", count: 12 },
// aptos: { name: "aptos", url: "127.0.0.2", count: 54 }
// }⚠️ 注意：务必使用 hasOwnProperty 检查，避免继承属性干扰（如原型链上的方法）。
✅ 方案二：转换为标准对象数组（更推荐用于列表渲染）
若需传递给表格、下拉框或 React/Vue 列表组件，数组格式更通用且语义清晰：
const apiResponse = {
akash: { url: "127.0.0.1", count: 12 },
aptos: { url: "127.0.0.2", count: 54 }
};
const list = Object.entries(apiResponse).map(([key, value]) => ({
name: key,
...value
}));
console.log(list);
// → [
// { name: "akash", url: "127.0.0.1", count: 12 },
// { name: "aptos", url: "127.0.0.2", count: 54 }
// ]该写法利用 Object.entries() 返回 [key, value] 元组数组，再通过 map 生成新对象，代码更函数式、无副作用，且天然跳过原型属性，无需手动 hasOwnProperty 判断。
? 补充说明与最佳实践
- 性能考量：对于数千级键的对象，两种方案时间复杂度均为 O(n)，性能差异可忽略；但 Object.entries().map() 在现代引擎中优化更好。
-
类型安全（TypeScript）：建议为源对象定义接口，例如：
interface ServiceConfig { url: string; count: number; } type ApiResponse = Record<string, ServiceConfig>; -
空值防御：生产环境建议增加非空校验：
if (!apiResponse || typeof apiResponse !== 'object') { throw new Error('Invalid API response format'); }
无论选择对象增强还是数组转换，核心逻辑始终是「提取键名 + 合并到子对象」。掌握这一模式，可轻松适配类似需求：如添加 id、category 或基于键名生成 label 等场景。
