迹忆客 专注技术分享

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

在 TypeScript 中获取枚举的长度

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

要获取枚举的长度:

  1. 使用 Object.keys() 方法获取包含枚举键的数组。
  2. 访问数组的长度属性。
  3. 使用数字枚举时,将结果除以 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 中获取枚举的长度

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,因为我们已经排除了为反向映射生成的所有键。

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

本文地址:

相关文章

在 TypeScript 中返回一个 Promise

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

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

扫一扫阅读全部技术教程

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

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便