深入解析：如何在 TypeScript 中高效遍历枚举值

2026-02-04 01:03:12 0条评论 3次阅读 0人点赞

在日常的 TypeScript 开发中，枚举是我们定义一组具名常量的首选方式，它让我们的代码更具可读性和可维护性。例如，我们可以用枚举来表示状态码、颜色选项或配置项。但除了定义这些常量之外，我们经常需要在运行时动态地处理这些数据——比如在下拉菜单中渲染所有选项，或者将状态码映射为相应的描述文本。

这就引出了一个常见的需求：如何遍历枚举中的所有值？

如果你直接尝试像遍历数组那样去遍历枚举，可能会遇到一些意想不到的麻烦。别担心，在这篇文章中，我们将深入探讨几种在 TypeScript 中遍历枚举值的高效方法。我们将分析每种方法的优缺点，并通过实际代码示例展示它们的工作原理，帮助你选择最适合当前场景的解决方案。准备好让你的代码更加灵活了吗？让我们开始吧。

1 使用 for…in 循环
2 使用 Object.values()
3 使用 for…of 循环结合 Object.values()
4 使用 Object.keys() 并映射值
5 深入探讨：数字枚举 vs 字符串枚举
6 总结与建议

使用 for…in 循环

INLINECODEc4c002e8 循环是 JavaScript 中用于遍历对象属性的经典方法。在 TypeScript 中，由于枚举在编译后通常会被转换为一个对象（包含键到值和值到键的双向映射），INLINECODE200c828d 自然成为了一个可行的遍历手段。

工作原理

当我们使用 INLINECODEce5134de 遍历枚举时，循环变量实际上代表的是枚举成员的键名（Key），而不是直接的值。这意味着我们需要通过 INLINECODEa7d10640 的方式来获取实际的值。

潜在陷阱：反向映射

这里有一个非常重要的细节：默认情况下，TypeScript 的数字枚举会被编译成一个包含反向映射的对象。也就是说，你可以通过值访问到键。这会导致 INLINECODE3ae61744 循环不仅遍历你定义的键，还会遍历那些自动生成的反向键。为了解决这个问题，我们必须严格检查属性是否为对象“自己的”，通常结合 INLINECODEe1967b2a 来使用。不过，对于字符串枚举，这个反向映射问题是不存在的，但加上检查依然是一个良好的防御性编程习惯。

代码示例

让我们来看一个使用 for...in 遍历字符串枚举的例子。这里我们模拟了一个学生信息管理系统，需要打印所有学生的属性信息。

// 定义一个包含学生信息的字符串枚举
enum StudentInfo {
    Name = "Yogesh",
    RollNo = "14",
    Branch = "Civil",
    Div = "A",
}

// 使用 for...in 循环遍历枚举
for (const key in StudentInfo) {
    // 关键步骤：检查属性是否属于枚举本身，而不是来自原型链
    if (StudentInfo.hasOwnProperty(key)) {
        // 获取值并打印
        const value = StudentInfo[key];
        console.log(`键: ${key}, 值: ${value}`);
    }
}

输出结果：

键: Name, 值: Yogesh
键: RollNo, 值: 14
键: Branch, 值: Civil
键: Div, 值: A

在这个例子中，INLINECODE2a52d734 变量的类型推断是 INLINECODE11d787d7。通过 StudentInfo[key] 我们获取到了对应的字符串值。这种方法虽然基础，但在处理复杂对象时非常直观。

使用 Object.values()

如果你觉得 INLINECODEab2f8f97 加 INLINECODEf3cbc08d 的组合略显繁琐，那么 Object.values() 方法绝对会让你眼前一亮。这是 ES2017 引入的一个静态方法，专门用于提取对象的所有可枚举属性值，并返回一个数组。

为什么这是更现代的选择？

使用 INLINECODE33a3d0d3 的最大优势在于代码更简洁。它直接返回一个包含所有值的数组，这意味着我们可以立即使用数组的高阶方法（如 INLINECODEe4503260, INLINECODE84d5f53f, INLINECODE0c24fbfb）来处理数据，而无需关心底层的键名是什么。这在处理纯数据渲染时特别有用。

实战应用：配置渲染

假设我们正在构建一个关于公司的“关于我们”页面，我们需要从枚举中提取数据并在页面上展示。

enum CompanyInfo {
    Name = "TechCorporation",
    Founder = "Alice Smith",
    Year = "2015"
}

// 直接提取所有值到数组中
const values = Object.values(CompanyInfo);

// 使用 forEach 进行迭代打印
console.log("--- 公司信息列表 ---");
values.forEach(value => {
    console.log(value);
});

// 你甚至可以将其渲染到 UI 列表中
values.forEach(value => {
    const listItem = `${value}`;
    // 模拟 DOM 操作逻辑
    console.log(listItem);
});

输出结果：

--- 公司信息列表 ---
TechCorporation
Alice Smith
2015
TechCorporation
Alice Smith
2015

正如你所见，Object.values() 极大地简化了数据提取的过程。不过需要注意的是，如果枚举是数字类型的，返回的数组中会同时包含键名（字符串）和值（数字），这一点在下一节我们会详细对比。

使用 for…of 循环结合 Object.values()

INLINECODE48db3273 循环是 ES6 引入的另一种遍历语法，它与 INLINECODE4b0b92fd 不同：INLINECODE1038fd2d 遍历的是对象的键，而 INLINECODE8063412f 遍历的是值。但是，for...of 不能直接用于对象，它主要用于可迭代对象（如数组、Set、Map）。

最佳组合：先转数组，再迭代

因此，最优雅的遍历枚举值的方式，是将 INLINECODE449e07c4 与 INLINECODE40716c87 结合起来。这种写法不仅保留了 INLINECODE1f814ebe 循环的灵活性（支持 INLINECODE47fa2211 和 continue），还避免了手动索引的麻烦，可读性极高。

让我们通过一个方向的例子来看看这种组合在处理 UI 逻辑时的便利性。

enum Direction {
  North = "N",
  South = "S",
  East = "E",
  West = "W",
}

console.log("--- 可用的导航方向 ---");

// 1. 将枚举转为数组
const directionArray = Object.values(Direction);

// 2. 使用 for...of 遍历数组
for (const value of directionArray) {
  console.log(`当前方向: ${value}`);
  
  // 模拟逻辑：如果是 West，则停止
  if (value === "W") {
    console.log("已到达最西端，停止导航。");
    // break; // 你可以随时中断循环
  }
}

输出结果：

--- 可用的导航方向 ---
当前方向: N
当前方向: S
当前方向: E
当前方向: W
已到达最西端，停止导航。

实用见解

为什么我推荐这种组合？因为当我们需要循环控制（例如在找到某个特定值后立即退出循环）时，INLINECODEc168185d 是无能为力的（它不支持 INLINECODE8a90f744），而 for...of 结合数组转换则是完美的解决方案。这种写法在处理大量数据或需要条件退出的业务逻辑时非常高效。

使用 Object.keys() 并映射值

最后一种方法是使用 INLINECODE912eb6a3。与 INLINECODE4097c4d4 相反，这个方法返回的是一个包含所有键名的字符串数组。虽然多了一步“将键转换为值”的操作，但在某些特定的业务场景下，我们需要同时利用“键”和“值”时，这种方法是非常有用的。

类型安全的重要性

在使用 INLINECODEf21afcbf 时，TypeScript 的类型推断可能会变得比较棘手。INLINECODE63d53cc0 返回的类型是 INLINECODEfa181051，这意味着如果我们直接用 INLINECODE51f46fe3，TypeScript 可能会报错说不能使用 string 类型作为索引。为了解决这个问题，我们需要使用类型断言，明确告诉 TypeScript 这个键是枚举的一部分。

高级示例：构建下拉菜单选项

想象一下，你正在使用 React 或 Vue 开发一个表单，你需要将枚举转换为下拉菜单所需的 INLINECODE0270a41e 格式。这时，INLINECODE84cb26a6 就派上用场了，因为它允许我们同时访问键和值，从而创建更有意义的标签。

enum Colors {
    Red = "RED",
    Green = "GREEN",
    Blue = "BLUE"
}

// 获取所有键
const keys = Object.keys(Colors);

// 定义选项接口
interface SelectOption {
    label: string;  // 显示给用户的文本
    value: string;  // 实际的值
}

const options: SelectOption[] = [];

keys.forEach((key) => {
    // 注意：这里我们需要进行类型断言
    // key 的类型是 string，但我们需要它作为 Colors 的键
    const value = Colors[key as keyof typeof Colors];
    
    // 构建选项对象：使用原始的 key 作为 label，使用映射后的 value 作为 value
    options.push({
        label: key,          // 例如: "Red"
        value: value         // 例如: "RED"
    });
});

console.log(options);

输出结果：

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

这个例子展示了 INLINECODE6b0a9a01 的强大之处：它允许我们根据键名（如 INLINECODE7f5c7db4）生成人类可读的标签，同时保留枚举值（如 RED）作为后端交互的实际数据。这对于处理 UI 映射来说非常完美。

深入探讨：数字枚举 vs 字符串枚举

在上述所有方法中，我们主要展示了字符串枚举的例子。但在 TypeScript 中，数字枚举也非常常见。我们必须了解两者在遍历时的巨大差异。

数字枚举的特殊性

请看下面的数字枚举定义：

enum Status {
  Active = 1,
  Inactive,
  Pending
}

TypeScript 会将其编译为类似这样的对象：

{
  1: "Active",
  2: "Inactive",
  3: "Pending",
  Active: 1,
  Inactive: 2,
  Pending: 3
}

你看，对象中不仅有 INLINECODEf8dcf229 这样的键，还有 INLINECODEf8afdd1a 这样的键。

影响

如果你对数字枚举使用 INLINECODE57eaf72e 或 INLINECODE14ce79da，你会得到一个混合数组：

INLINECODE0cebfa1c 将返回 INLINECODE9f125538。

这通常不是我们想要的结果，因为我们只想要值（或者只想要键）。

最佳实践：如何优雅地处理数字枚举

为了在遍历数字枚举时只获取我们定义的成员（而不包含反向映射的键），我们可以利用 filter 方法结合类型检查，或者简单的利用数组切片技巧（因为反向映射通常追加在后面，但这不总是可靠的）。

更推荐的做法是使用 filter 排除非数字类型的值（如果你的目标只是数值）：

enum StatusCode {
  Success = 200,
  NotFound = 404,
  ServerError = 500
}

// 遍历所有值并过滤
const allValues = Object.values(StatusCode);

// 过滤策略：只要数字类型的值（假设反向映射是字符串）
const numericValues = allValues.filter((val) => typeof val === ‘number‘);

console.log(numericValues); // 输出: [200, 404, 500]

或者，更通用的一种获取纯枚举值的方法是：

// 这种方法利用了数字枚举的特性：反向映射的值是字符串
const enumValues = Object.values(StatusCode).filter(v => typeof v === ‘number‘);

掌握这一区别对于编写健壮的 TypeScript 代码至关重要，否则你可能会在生产环境的日志中看到奇怪的 INLINECODE4b91a60f 字符串，或者在下拉框里看到数字 INLINECODE1253c6e4 被重复显示。

总结与建议

在这篇文章中，我们探讨了四种在 TypeScript 中遍历枚举值的方法，并深入分析了它们的内部机制和适用场景。让我们快速回顾一下：

INLINECODEc3a3ca94 循环：最基础的方法，适合需要同时操作键和值的场景。记得使用 INLINECODEd89d7ec0 来保证安全性。
Object.values()：最简洁的方法，推荐用于只需要处理值的场景（如数据渲染），代码可读性最高。
INLINECODEf702509c 结合 INLINECODEee7d3b38：最灵活的方法，当你需要在循环中使用 INLINECODEd6acb03d 或 INLINECODE7d27f75e 进行流程控制时，这是最佳选择。
Object.keys() 映射：当你需要将枚举转换为其他格式（如 UI 组件的 Label/Value 对象）时，这种方法提供了最大的灵活性。

给开发者的建议

首选字符串枚举：除非你有必要与后端数字协议对接，否则尽量使用字符串枚举。它们在遍历时行为更一致，不会产生令人困惑的反向映射。
保持类型安全：在使用 INLINECODE5aa3f17c 或 INLINECODEe49736a5 时，TypeScript 可能无法准确推断类型，适当使用 keyof typeof 或泛型断言，可以让你的代码更健壮。

希望这些技巧能帮助你更从容地处理 TypeScript 枚举！下次当你遇到需要遍历枚举的场景时，不妨根据具体需求，从工具箱里挑选最合适的那把“锤子”。如果你有其他独特的遍历技巧，欢迎在代码实践中不断探索和分享！

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

豆丁博客

深入解析：如何在 TypeScript 中高效遍历枚举值

使用 for…in 循环

工作原理

潜在陷阱：反向映射

代码示例

使用 Object.values()

为什么这是更现代的选择？

实战应用：配置渲染

使用 for…of 循环结合 Object.values()

最佳组合：先转数组，再迭代

实用见解

使用 Object.keys() 并映射值

类型安全的重要性

高级示例：构建下拉菜单选项

深入探讨：数字枚举 vs 字符串枚举

数字枚举的特殊性

影响

最佳实践：如何优雅地处理数字枚举

总结与建议

给开发者的建议

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