在 TypeScript 中如何遍历 Enum 的两种方式

背景

TypeScript 中有一个 JavaScript 中没有的声明关键字，即 enum ,在 TypeScript 项目开发过程中，我发现使用枚举enum的概率是极高的。枚举是一种特殊的数据类型，它允许开发者定义一个静态变量集合。枚举类型帮助开发者清晰的预设集合中的变量，并且不允许运行时修改，这为程序运行提供了可预测性和稳定性的保障。

在开发过程中，我们经常遇到需要遍历对象中所有属性的情况，对于特殊的枚举enum对象，这种情况也是很常见的。

本文将完整介绍如何遍历枚举enum对象。

场景假设

假设现在有一个Color的枚举对象，需要对它内部的值进行遍历。

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

遍历方法只要有两种方式

1. 遍历出枚举所有的key
2. 遍历出枚举所有的value

遍历方案

遍历 Enum Keys

通过 for-in 循环实现Enum对象的keys

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

for (let color in Colors) {
    console.log(color);
}

上面的代码会输出枚举 Colors 所有的keys，即 "Red"、"Green" 和 "Blue"

或者使用 Object.keys

typescript
Object.keys(Colors).forEach(key => console.log(key));

!!!特殊情况

当 Enum 是数字型时，需要特别注意。因为 TypeScript 会为数字 Enum 提供反向映射 (value 到 key)，此时我们需要借助 isNaN() 函数来防止出现重复的元素。

typescript
enum Numbers {
    Zero,
    One,
    Two,
}

for (let number in Numbers) {
    if (!isNaN(Number(number))) {
        continue;
    }
    console.log(number);
}

上面的代码中，对于每个元素我们都检查了 isNaN(Number(number)) 是否为 true，只有当这个条件满足时，我们才将该元素输出到控制台。这样避免了数字 Enum 的反向映射问题。

遍历 Enum Values 遍历

通过 for-in 循环实现Enum对象的values

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

for (let color in Colors) {
    console.log(Colors[color]);
}

上面的代码会输出枚举 Colors 所有的keys，即 "Red"、"Green" 和 "Blue"

或者使用 Object.values

typescript
Object.values(Colors).forEach(value => console.log(value));

总结

在 TypeScript 中，我们有多种方式可以有效地遍历 Enum。你可以根据实际需求和场景选择最适合的方式。对于传统的 Enum，可以使用 for-in 循环，对于需要获取 Enum 元素名称的情况，可能会选择使用普通对象。