迹忆客 专注技术分享

当前位置:主页 > 学无止境 > 编程语言 > TypeScript >

如何在 TypeScript 中迭代枚举

作者:迹忆客 最近更新:2022/10/25 浏览次数:

迭代枚举:

  1. 使用 Object.keys()Object.values() 方法获取枚举的键或值的数组。
  2. 过滤掉任何不必要的值。
  3. 使用 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 中迭代枚举

代码片段显示了如何迭代字符串和数字枚举的键和值。

Typescript 枚举是真实的对象并且存在于运行时。 这就是我们能够将枚举传递给 Object.keysbject.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 枚举,上面的示例将不起作用。

常量枚举只能使用常量枚举表达式,并且在编译过程中被完全删除。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 TypeScript 中返回一个 Promise

发布时间:2023/03/19 浏览次数:182 分类:TypeScript

本教程讨论如何在 TypeScript 中返回正确的 Promise。这将提供 TypeScript 中 Returns Promise 的完整编码示例,并完整演示每个步骤。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便