如何在 TypeScript 中迭代枚举

迭代枚举:

  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.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 枚举,上面的示例将不起作用。

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