将 TypeScript 枚举转换为对象数组：全方位指南与最佳实践

2026-02-05 22:06:23 0条评论 4次阅读 0人点赞

在日常的前端开发工作中，尤其是当你使用 React、Vue 或 Angular 等框架时，我们经常需要处理下拉菜单、选项列表或单选按钮组。TypeScript 的枚举功能为我们提供了一种优雅的方式来定义一组具名的常量，极大地提高了代码的可读性和可维护性。然而，UI 组件通常并不直接“吃”枚举类型，它们更需要的是包含 INLINECODE3b0f3704（显示文本）和 INLINECODEbf6964c1（实际值）的对象数组。

你是不是也曾遇到过这样的困扰：定义好了一个漂亮的枚举，却还要手动写一堆冗余的代码将其转换为组件能识别的格式？或者在面对字符串枚举和数字枚举时，转换逻辑的差异让你感到头疼？

别担心，在这篇文章中，我们将深入探讨如何将 TypeScript 枚举转换为对象数组。我们不仅会涵盖从基础的“手动映射”到现代的“Object.entries()”等多种方法，还会深入剖析底层原理，对比它们的优缺点，并分享一些处理复杂数据结构的实用技巧。让我们开始这场代码优化之旅吧！

为什么我们需要枚举到数组的转换？

在 TypeScript 中，enum 是一种非常强大的数据结构，它允许我们定义一组具有描述性名称的常量。比如，我们可以这样定义一组颜色：

enum Color {
  Red = ‘RED‘,
  Green = ‘GREEN‘,
  Blue = ‘BLUE‘
}

这看起来很完美，但在实际的 UI 开发中，当我们需要渲染一个下拉选择框时，组件通常需要的数据格式是这样的：

[
  { "label": "Red", "value": "RED" },
  { "label": "Green", "value": "GREEN" },
  { "label": "Blue", "value": "BLUE" }
]

这种格式将“用户看到的文本”和“程序处理的值”分离开来，符合国际化和用户体验的最佳实践。因此，掌握如何高效、准确地在枚举和这种对象数组之间进行转换，是每一位 TypeScript 开发者的必修课。

准备工作：理解枚举的运行时行为

在深入代码之前，我们需要先理解 TypeScript 枚举在编译后的行为。这对我们后续选择转换方法至关重要。

数字枚举：具有反向映射。即我们可以通过 INLINECODEb2370cf8 得到 INLINECODE6edf1583，也可以通过 INLINECODEe4cb874f 得到 INLINECODE15279a97。
字符串枚举：不具有反向映射。
异构枚举（Heterogeneous enums）：混合了字符串和数字，虽然不推荐，但在旧代码中可能会遇到。

大多数现代 Web 应用倾向于使用字符串枚举，因为它们在调试时更清晰，且序列化（JSON）更友好。在接下来的例子中，我们将主要关注字符串枚举，因为它能提供最直观的 INLINECODE57e2da46 结构。如果你使用的是数字枚举，文中提到的方法（特别是 INLINECODEc1d27aca）可能需要额外的 filter 步骤来过滤掉反向生成的键，这是一个非常常见的坑，我们稍后会在“常见错误”章节详细讨论。

让我们通过一个具体的示例场景来展开。假设我们正在开发一个待办事项应用，我们需要将任务的优先级从枚举转换为选项数组。

—

1 方法 1：手动映射（基础但稳健）
2 方法 2：使用 Object.entries()（现代且简洁）
3 方法 3：使用 Object.keys() 和 map()
4 方法 4：使用 Object.values() 和 map()
5 进阶技巧与最佳实践

方法 1：手动映射（基础但稳健）

最直观的方法就是手动遍历枚举的键，并构建我们想要的数组结构。这种方法虽然代码量稍多，但它最容易被理解，且对初学者非常友好，不依赖任何高级的 JavaScript 特性。

核心原理

我们使用 INLINECODE0ff5bb3e 循环来遍历枚举对象。对于字符串枚举，循环会直接给出键名。通过访问 INLINECODE6051809a，我们可以获取对应的值。

代码示例

// 定义一个字符串枚举：优先级
enum Priority {
  High = ‘HIGH‘,
  Medium = ‘MEDIUM‘,
  Low = ‘LOW‘
}

// 初始化一个空数组，类型定义为包含 label 和 value 的对象数组
const priorityOptions: { label: string; value: string }[] = [];

// 遍历枚举
for (const key in Priority) {
  // 安全检查：确保该属性是枚举自身的，而不是继承自原型链
  // 注意：对于字符串枚举，这一步通常是可选的，但在更复杂的对象中是良好的习惯
  if (Priority.hasOwnProperty(key)) {
    // 将键和值推入数组
    // 这里的 key 是 ‘High‘, ‘Medium‘...
    // Priority[key] 是 ‘HIGH‘, ‘MEDIUM‘...
    priorityOptions.push({ 
      label: key, 
      value: Priority[key] 
    });
  }
}

console.log(priorityOptions);

输出结果：

[
  { "label": "High", "value": "HIGH" },
  { "label": "Medium", "value": "MEDIUM" },
  { "label": "Low", "value": "LOW" }
]

实际应用场景

这种方法非常适合逻辑简单的场景，或者当你需要对生成的数组进行特定过滤时。比如，你可能想把某个特定的枚举值（例如 ‘Deleted‘ 状态）排除在选项列表之外，手动遍历让你可以轻松添加 if (key !== ‘Deleted‘) 的判断逻辑。

—

方法 2：使用 Object.entries()（现代且简洁）

随着现代 JavaScript 和 TypeScript 的普及，函数式编程风格变得越来越流行。INLINECODE931507d1 方法将对象转换为键值对数组，配合 INLINECODE91e7bfd7 方法，可以让我们写出非常优雅的一行式转换代码。

核心原理

INLINECODEf6d5fd36 会返回一个二维数组，例如 INLINECODEbfe9bf73。我们可以解构这个数组，直接将其重塑为我们需要的对象格式。

代码示例

enum Status {
  Pending = ‘PENDING‘,
  Approved = ‘APPROVED‘,
  Rejected = ‘REJECTED‘
}

// 使用 Object.entries 转换
const statusOptions = Object.entries(Status)
  .map(([label, value]) => ({ label, value }));

console.log(statusOptions);

输出结果：

[
  { "label": "Pending", "value": "PENDING" },
  { "label": "Approved", "value": "APPROVED" },
  { "label": "Rejected", "value": "REJECTED" }
]

为什么这种方法很棒？

代码简洁：它消除了手动循环和中间变量的需要。
不可变性：map 方法生成一个新数组，不会修改原始数据，符合函数式编程的原则。
可读性：对于熟悉 ES6+ 语法的开发者来说，意图非常明确：将条目转换为对象。

—

方法 3：使用 Object.keys() 和 map()

有时候，我们可能只关心枚举的键（比如作为 Label），然后手动去查找值。Object.keys() 是获取对象所有键名的标准方法。

核心原理

INLINECODEaf80c9ac 返回一个包含所有键名的字符串数组。我们遍历这个数组，并利用枚举的自索引特性（INLINECODE45fe4e02）来获取对应的值。

代码示例

enum Role {
  Admin = ‘ADMIN‘,
  User = ‘USER‘,
  Guest = ‘GUEST‘
}

// 使用 Object.keys 转换
const roleOptions = Object.keys(Role)
  .map((label) => ({ 
    label: label, 
    value: Role[label] 
  }));

console.log(roleOptions);

输出结果：

[
  { "label": "Admin", "value": "ADMIN" },
  { "label": "User", "value": "USER" },
  { "label": "Guest", "value": "GUEST" }
]

深入讲解与常见错误

⚠️ 重要警告：数字枚举的陷阱

这是该方法（以及 for...in 方法）最容易出现 Bug 的地方。如果你的枚举是这样定义的：

enum NumericEnum {
  One = 1,
  Two = 2
}

TypeScript 会在编译时生成反向映射。INLINECODEf17d3b65 将返回 INLINECODE79a9bfa2。这会导致你的转换结果包含重复或错误的数据（例如 { label: ‘1‘, value: ‘One‘ }）。

解决方案：如果你使用 INLINECODE8343c8cb 处理可能混合或不确定的枚举，最好加上一个 INLINECODE98c464f1 来排除数字键：

const safeOptions = Object.keys(NumericEnum)
  .filter(key => isNaN(Number(key))) // 过滤掉数字类型的键
  .map((label) => ({ label, value: NumericEnum[label] }));

这就是为什么我们在文章开头推荐字符串枚举的原因——它们可以避免这类令人抓狂的运行时问题。

—

方法 4：使用 Object.values() 和 map()

这种方法比较特殊。它直接提取枚举的所有值。这在某些特定场景下非常有用，比如当你希望 INLINECODE777f1e95 和 INLINECODE0fc488a3 都是枚举值，或者你不需要原始的键名时。

核心原理

Object.values() 忽略键，直接返回一个由值组成的数组。然后我们将这些值映射为对象。

代码示例

enum Direction {
  North = ‘NORTH‘,
  South = ‘SOUTH‘,
  East = ‘EAST‘,
  West = ‘WEST‘
}

// 使用 Object.values 转换
// 注意：这里 label 和 value 是相同的
const directionOptions = Object.values(Direction)
  .map(value => ({ 
    label: value, // Label 也就是 ‘NORTH‘
    value: value  // Value 也是 ‘NORTH‘
  }));

console.log(directionOptions);

输出结果：

[
  { "label": "NORTH", "value": "NORTH" },
  { "label": "SOUTH", "value": "SOUTH" },
  { "label": "EAST", "value": "EAST" },
  { "label": "WEST", "value": "WEST" }
]

适用场景

这种方法非常适合那些代码和显示文本完全一致的场合（比如国家代码 ISO-3166）。如果你不想在 UI 上显示 "Red" 但发送给后端 "red"，而是两者都显示 "RED"，那么这是最快的方法。不过，在大多数需要用户友好的应用中，我们通常希望 INLINECODE94e9ceb5 是可读的文本（如“红色”），而 INLINECODEd9d242a2 是代码，因此前几种方法更为通用。

—

进阶技巧与最佳实践

既然我们已经掌握了基本方法，让我们来看看如何在实际项目中更专业地处理这些转换。

1. 创建可复用的工具函数

不要在每次需要转换时都写一遍 .map() 逻辑。让我们创建一个类型安全的通用工具函数。

/**
 * 将字符串枚举转换为对象数组
 * @param enumObj 枚举对象
 */
function enumToObjectArray<T extends Record>(enumObj: T) {
  return Object.entries(enumObj).map(([label, value]) => ({
    label,
    value
  }));
}

// 使用示例
enum Environment {
  Dev = ‘development‘,
  Prod = ‘production‘
}

const envOptions = enumToObjectArray(Environment);
// 类型推断完美：{ label: string; value: string; }[]

2. 支持国际化（i18n）

直接使用枚举的键作为 INLINECODE4149e996（如 INLINECODEe03dd616）对用户不太友好。通常我们需要显示中文或其他语言。我们可以在 map 过程中进行字典查找。

enum OrderStatus {
  Created = ‘CREATED‘,
  Paid = ‘PAID‘,
  Shipped = ‘SHIPPED‘
}

// 简单的翻译字典
const StatusLabels: Record = {
  [OrderStatus.Created]: ‘已创建‘,
  [OrderStatus.Paid]: ‘已支付‘,
  [OrderStatus.Shipped]: ‘已发货‘
};

const localizedOptions = Object.entries(OrderStatus)
  .map(([key, value]) => ({
    label: StatusLabels[value as OrderStatus] || key, // 获取翻译文本
    value: value
  }));

// 输出: [{ label: ‘已创建‘, value: ‘CREATED‘ }, ...]

3. 嵌套枚举的处理

有时候枚举值不仅仅是字符串，可能还包含元数据（虽然这在 TS 中较少见，通常我们会用对象数组代替枚举）。如果你遇到类似结构，可能需要递归处理。但在 TypeScript 中，更推荐的做法是如果数据结构变得复杂，直接使用 INLINECODEf2b95cd3 配合 INLINECODE0e76580b 断言来定义数据，而不是使用枚举，这样转换会自然得多。

4. 性能优化建议

对于绝大多数应用场景，上述方法的性能差异可以忽略不计。现代 JavaScript 引擎（V8）对 INLINECODEf1d72070、INLINECODE6575a88b 等方法做了深度优化。

避免重复计算：如果你的枚举非常大（比如几百个选项），不要在组件的 INLINECODE9a514e5c 方法中每次都进行转换。将转换结果提取到组件外部，或者使用 INLINECODE9d0be15a 钩子缓存结果。
选择最简单的方法：Object.entries 通常是可读性和性能的最佳平衡点。

总结

在这篇文章中，我们探讨了将 TypeScript 枚举转换为对象数组的四种主要方法。

手动映射 提供了最大的控制权，适合复杂的逻辑过滤。
Object.entries() 是现代、简洁且推荐的“黄金标准”，适用于大多数场景。
Object.keys() 提供了另一种视角，但需警惕数字枚举的反向映射陷阱。
Object.values() 适合显示值与代码值一致的场景。

我们建议你在项目中优先使用字符串枚举，并配合 Object.entries 封装一个通用的工具函数。这不仅能提高代码的健壮性，还能让你的 UI 组件数据准备变得更加轻松愉快。希望这些技巧能帮助你编写出更清晰、更专业的 TypeScript 代码！

如果你在实际开发中遇到了更棘手的类型转换问题，或者想了解更多关于 TypeScript 高级类型的用法，欢迎继续关注我们的深入探讨。

投稿给我们	如何建站？
vps是什么？	如何安装宝塔？
如何通过博客赚钱？	便宜wordpress托管方案
免费wordpress主题	这些都是免费方案

豆丁博客

将 TypeScript 枚举转换为对象数组：全方位指南与最佳实践

为什么我们需要枚举到数组的转换？

准备工作：理解枚举的运行时行为

方法 1：手动映射（基础但稳健）

核心原理

代码示例

实际应用场景

方法 2：使用 Object.entries()（现代且简洁）

核心原理

代码示例

为什么这种方法很棒？

方法 3：使用 Object.keys() 和 map()

核心原理

代码示例

深入讲解与常见错误

方法 4：使用 Object.values() 和 map()

核心原理

代码示例

适用场景

进阶技巧与最佳实践

1. 创建可复用的工具函数

2. 支持国际化（i18n）

3. 嵌套枚举的处理

4. 性能优化建议

总结

相关文章美国1G带宽/1T流量高速vps $17.99/年