在 TypeScript 中获取枚举的长度
要获取枚举的长度:
-
使用
Object.keys()
方法获取包含枚举键的数组。 - 访问数组的长度属性。
- 使用数字枚举时,将结果除以 2,因为会生成反向映射。
// ✅ For String Enums
enum Sizes {
Small = 'S',
Medium = 'M',
Large = 'L',
}
const length1 = Object.keys(Sizes).length;
console.log(length1); // 👉️ 3
// ✅ For Numeric Enums
enum SizesNumeric {
Small,
Medium,
Large,
}
const length2 = Object.keys(SizesNumeric).length / 2;
console.log(length2); // 👉️ 3
// ✅ For Mixed Enums (both strings and numbers)
enum SizesMixed {
Small = 1,
Medium = 'test',
Large = 3,
ExtraLarge = 4,
}
const length3 = Object.keys(SizesMixed).filter((v) => isNaN(Number(v))).length;
console.log(length3); // 👉️ 4
TypeScript 中的枚举是真实的对象,存在于运行时。 这就是我们能够将枚举传递给 Object.keys
方法的原因。
Object.keys()
方法返回一个包含对象键的数组。
// 👇️ ['name', 'age']
console.log(Object.keys({ name: 'Alice', age: 30 }));
但是,数字和字符串枚举的输出是不同的。
// ✅ For String Enums
enum Sizes {
Small = 'S',
Medium = 'M',
Large = 'L',
}
// 👇️ ['Small', 'Medium', 'Large']
console.log(Object.keys(Sizes));
// ✅ For Numeric Enums
enum SizesNumeric {
Small,
Medium,
Large,
}
// 👇️ ['0', '1', '2', 'Small', 'Medium', 'Large']
console.log(Object.keys(SizesNumeric));
注意
,当将数字枚举传递给Object.keys
方法时,我们会得到一个包含枚举值和名称的数组,而对于字符串枚举,我们只获取名称。
这是因为反向映射仅针对数字枚举生成。
反向映射允许我们通过值访问数字枚举的键。
// ✅ For Numeric Enums
enum SizesNumeric {
Small,
Medium,
Large,
}
console.log(SizesNumeric[0]); // 👉️ "Small"
console.log(SizesNumeric[1]); // 👉️ "Medium"
这就是为什么我们必须将 Object.keys()
方法返回的数组长度除以数字枚举的 2。
字符串枚举成员根本不会生成反向映射。
如果我们正在使用混合枚举(包含字符串和数字成员的枚举),则必须过滤掉反向映射的键。
换句话说,我们必须从键数组中排除有效数字。
// ✅ For Mixed Enums (both strings and numbers)
enum SizesMixed {
Small = 1,
Medium = 'M',
Large = 3,
ExtraLarge = 4,
}
const length3 = Object.keys(SizesMixed).filter((v) => isNaN(Number(v))).length;
console.log(length3); // 👉️ 4
filter()
方法用于过滤掉数组中所有有效数字的键(生成的反向映射键)。
我们不必除以 2,因为我们已经排除了为反向映射生成的所有键。
相关文章
在 AngularJs 中设置 Select From Typescript 的默认选项值
发布时间:2023/04/14 浏览次数:78 分类:Angular
-
本教程提供了在 AngularJs 中从 TypeScript 中设置 HTML 标记选择的默认选项的解释性解决方案。
在 Angular 中使用 TypeScript 的 getElementById 替换
发布时间:2023/04/14 浏览次数:153 分类:Angular
-
本教程指南提供了有关使用 TypeScript 在 Angular 中替换 document.getElementById 的简要说明。这也提供了在 Angular 中 getElementById 的最佳方法。
在 TypeScript 中使用 try..catch..finally 处理异常
发布时间:2023/03/19 浏览次数:181 分类:TypeScript
-
本文详细介绍了如何在 TypeScript 中使用 try..catch..finally 进行异常处理,并附有示例。
在 TypeScript 中使用 declare 关键字
发布时间:2023/03/19 浏览次数:97 分类:TypeScript
-
本教程指南通过特定的实现和编码示例深入了解了 TypeScript 中 declare 关键字的用途。
在 TypeScript 中 get 和 set
发布时间:2023/03/19 浏览次数:172 分类:TypeScript
-
本篇文章演示了类的 get 和 set 属性以及如何在 TypeScript 中实现它。
在 TypeScript 中格式化日期和时间
发布时间:2023/03/19 浏览次数:161 分类:TypeScript
-
本教程介绍内置对象 Date() 并讨论在 Typescript 中获取、设置和格式化日期和时间的各种方法。
在 TypeScript 中返回一个 Promise
发布时间:2023/03/19 浏览次数:182 分类:TypeScript
-
本教程讨论如何在 TypeScript 中返回正确的 Promise。这将提供 TypeScript 中 Returns Promise 的完整编码示例,并完整演示每个步骤。
在 TypeScript 中定义函数回调的类型
发布时间:2023/03/19 浏览次数:221 分类:TypeScript
-
本教程说明了在 TypeScript 中为函数回调定义类型的解决方案。为了程序员的方便和方便,实施了不同的编码实践指南。
在 TypeScript 中把 JSON 对象转换为一个类
发布时间:2023/03/19 浏览次数:110 分类:TypeScript
-
本教程演示了如何将 JSON 对象转换为 TypeScript 中的类。