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

2023-12-26 23:43:01

背景

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

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

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

场景假设

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

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

遍历方法只要有两种方式

  1. 遍历出枚举所有的key
  2. 遍历出枚举所有的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 元素名称的情况,可能会选择使用普通对象。

文章来源:https://blog.csdn.net/m0_37890289/article/details/135232560
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。