背景
TypeScript 中有一个 JavaScript 中没有的声明关键字，即 enum ,在 TypeScript 项目开发过程中，我发现使用枚举enum的概率是极高的。枚举是一种特殊的数据类型，它允许开发者定义一个静态变量集合。枚举类型帮助开发者清晰的预设集合中的变量，并且不允许运行时修改，这为程序运行提供了可预测性和稳定性的保障。
在开发过程中，我们经常遇到需要遍历对象中所有属性的情况，对于特殊的枚举enum对象，这种情况也是很常见的。
本文将完整介绍如何遍历枚举enum对象。
场景假设
假设现在有一个Color的枚举对象，需要对它内部的值进行遍历。
enum Colors {Red = 'RED',Green = 'GREEN',Blue = 'BLUE',
}
遍历方法只要有两种方式
- 遍历出枚举所有的key
- 遍历出枚举所有的value
遍历方案
遍历 Enum Keys
通过**for-in** 循环实现Enum对象的keys
enum Colors {Red = "RED",Green = "GREEN",Blue = "BLUE",
}for (let color in Colors) {console.log(color);
}
上面的代码会输出枚举 Colors 所有的keys，即**"Red"、"Green"** 和 "Blue"
或者使用 Object.keys
Object.keys(Colors).forEach(key => console.log(key));
!!!特殊情况
当 Enum 是数字型时，需要特别注意。因为 TypeScript 会为数字 Enum 提供反向映射 (value 到 key)，此时我们需要借助 isNaN() 函数来防止出现重复的元素。
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
enum Colors {Red = "RED",Green = "GREEN",Blue = "BLUE",
}for (let color in Colors) {console.log(Colors[color]);
}
上面的代码会输出枚举 Colors 所有的keys，即**"Red"、"Green"** 和 "Blue"
或者使用 Object.values
Object.values(Colors).forEach(value => console.log(value));
总结
在 TypeScript 中，我们有多种方式可以有效地遍历 Enum。你可以根据实际需求和场景选择最适合的方式。对于传统的 Enum，可以使用 for-in 循环，对于需要获取 Enum 元素名称的情况，可能会选择使用普通对象。
