如何在 typescript 中使用带有枚举的 map() 方法-ag捕鱼王app官网

将 map() 方法与枚举一起使用：

1. 使用 object.keys() 方法获取枚举键的数组。
2. 使用 map() 方法迭代数组。
3. 在每次迭代中，返回最终数组应包含的值。

// ✅ for string enums
enum sizes {
  small = 's',
  medium = 'm',
  large = 'l',
}
const result = (object.keys(sizes) as (keyof typeof sizes)[]).map(
  (key, index) => {
    console.log(key);
    return sizes[key]   index;
  },
);
// 👇️ ['s0', 'm1', 'l2']
console.log(result);
// ✅ for numeric enums
enum sizesnumeric {
  small,
  medium,
  large,
}
const result2 = (
  object.keys(sizesnumeric).filter((v) =>
    isnan(number(v)),
  ) as (keyof typeof sizesnumeric)[]
).map((key, index) => {
  return sizesnumeric[key];
});
// 👇️ [0, 1, 2]
console.log(result2);

上面的示例显示了如何将 array.map 方法与字符串和数字枚举一起使用。

typescript 中的枚举是真实的对象，存在于运行时。 这就是我们能够将枚举传递给 object.keys 方法的原因。

object.keys() 方法返回一个包含对象键的数组。

// 👇️ ['name', 'age']
console.log(object.keys({ name: 'jim', age: 31 }));

但是，数字和字符串枚举的输出是不同的。

enum sizes {
  small = 's',
  medium = 'm',
  large = 'l',
}
// 👇️ ['small', 'medium', 'large']
console.log(object.keys(sizes));
// ✅ for string enums
enum sizesnumeric {
  small,
  medium,
  large,
}
// 👇️ ['0', '1', '2', 'small', 'medium', 'large']
console.log(object.keys(sizesnumeric));

请注意 ，对于数字枚举，输出包含键和值。

这就是我们在第一个示例中使用 filter() 方法的原因——从数组中排除所有不必要的值。

我们使用 keyof typeof 将数组中的值转换为枚举成员。

enum sizes {
  small = 's',
  medium = 'm',
  large = 'l',
}
// 👇️ type u = "small" | "medium" | large
type u = keyof typeof sizes;

keyof typeof 构造一个类型，将枚举中的所有键表示为字符串。

最后一步是使用 map() 方法。

我们传递给 map() 方法的函数会被数组中的每个值调用，我们从回调函数返回的任何内容都会被添加到新数组中。

换句话说，要将 map() 方法与枚举一起使用，我们必须将枚举键或值转换为数组，然后对结果调用 map() 方法。

如果要直接映射枚举的值，可以通过以下方式获取枚举值的数组。

enum sizes {
  small = 's',
  medium = 'm',
  large = 'l',
}
const keys1 = object.keys(sizes);
console.log(keys1); // 👉️ ['small', 'medium', 'large']
const values1 = object.values(sizes);
console.log(values1); // 👉️ ['s', 'm', 'l']
// ✅ for string enums
enum sizesnumeric {
  small,
  medium,
  large,
}
const keys2 = object.keys(sizesnumeric).filter((v) => isnan(number(v)));
console.log(keys2); // 👉️ ['small', 'medium', 'large']
const values2 = object.values(sizesnumeric).filter((v) => !isnan(number(v)));
console.log(values2); // 👉️ [0, 1, 2]

请注意 ，如果我们使用 const 枚举，上面的示例将不起作用，因为 const 枚举只能使用常量枚举表达式，并在编译期间被完全删除。