如何在 TypeScript 中迭代枚举
迭代枚举:
-
使用
Object.keys()
或Object.values()
方法获取枚举的键或值的数组。 - 过滤掉任何不必要的值。
-
使用
forEach()
方法迭代数组。
// ✅ For Numeric Enums
enum Sizes2 {
Small,
Medium,
Large,
}
const keys2 = Object.keys(Sizes2).filter((v) => isNaN(Number(v)));
console.log(keys2); // 👉️ ['Small', 'Medium', 'Large']
keys2.forEach((key, index) => {
// 👇️ Small, Medium, Large
console.log(key);
});
const values2 = Object.values(Sizes2).filter((v) => !isNaN(Number(v)));
console.log(values2); // 👉️ [0, 1, 2]
values2.forEach((value) => {
// 👇️ 0, 1, 2
console.log(value);
});
// ✅ For STRING Enums
enum Sizes {
Small = 'S',
Medium = 'M',
Large = 'L',
}
const keys1 = Object.keys(Sizes);
console.log(keys1); // 👉️ ['Small', 'Medium', 'Large']
keys1.forEach((key, index) => {
// 👇️ Small, Medium, Large
console.log(key);
});
const values1 = Object.values(Sizes);
values1.forEach((value, index) => {
// 👇️ S, M, L
console.log(value);
});
代码片段显示了如何迭代字符串和数字枚举的键和值。
Typescript 枚举是真实的对象并且存在于运行时。 这就是我们能够将枚举传递给 Object.keys
和 bject.values
方法的原因。
Object.keys()
和 Object.values()
方法返回一个包含对象键和值的数组。
const obj = { name: 'Tom', age: 30 };
const keys = Object.keys(obj);
console.log(keys); // 👉️ ['name', 'age']
const values = Object.values(obj);
console.log(values); // 👉️ ['Tom', 30]
但是,数字枚举的输出是不同的。
enum Sizes2 {
Small,
Medium,
Large,
}
// 👇️ ['0', '1', '2', 'Small', 'Medium', 'Large']
console.log(Object.keys(Sizes2));
输出包含枚举名称和值。 这就是我们在上面的示例中使用 filter()
方法的原因——从数组中过滤掉任何不必要的值。
这些示例使用 rray.forEach
方法迭代枚举键和值,但是我们也可以使用简单的 for...of
循环。
// ✅ For STRING Enums
enum Sizes {
Small = 'S',
Medium = 'M',
Large = 'L',
}
const keys1 = Object.keys(Sizes);
console.log(keys1); // 👉️ ['Small', 'Medium', 'Large']
for (const key of keys1) {
console.log(key);
}
for...of
循环的语法更简洁一些,但是我们无法像使用 forEach()
方法那样访问索引。
我们可能已经看到用于直接迭代枚举的 for...in
循环。
enum Sizes2 {
Small,
Medium,
Large,
}
for (const value in Sizes2) {
// 👇️ 0, 1, 2, Small, Medium, Large
console.log(value);
}
但是,通过这种方式,我们可以遍历这两者 - 枚举值和键,这很可能不是我们想要的。
如果我们使用 const
枚举,上面的示例将不起作用。
常量枚举只能使用常量枚举表达式,并且在编译过程中被完全删除。
相关文章
在 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 中的类。