在 TypeScript 中将枚举转换为对象数组

TypeScript 1月前 61

将枚举转换为对象数组：

使用 Object.keys() 方法获取枚举键的数组。
过滤掉数字枚举的不必要值。
使用 map() 方法迭代数组，每次迭代返回一个对象。

// ✅ For NUMERIC Enums
enum NumericEnum {
  Small,
  Medium,
  Large,
}

const arr1 = Object.keys(NumericEnum)
  .filter((v) => isNaN(Number(v)))
  .map((name) => {
    return {
      id: NumericEnum[name as keyof typeof NumericEnum],
      name,
    };
  });

// 👇️ [{id: 0, name: 'Small'}, {id: 1, name: 'Medium'}, {id: 2, name: 'Large'}]
console.log(arr1);

// ✅ For STRING Enums
enum StringEnum {
  Small = 'S',
  Medium = 'M',
  Large = 'L',
}

const arr2 = Object.keys(StringEnum).map((name) => {
  return {
    name,
    value: StringEnum[name as keyof typeof StringEnum],
  };
});

// 👇️ [{name: 'Small', value: 'S'}, {name: 'Medium', value: 'M'}, {name: 'Large', value: 'L'}]
console.log(arr2);

代码片段显示了如何将数字和字符串枚举转换为对象数组。

TypeScript 中的枚举是真实的对象，存在于运行时，因此我们可以使用 Object.keys 方法来获取枚举的键数组。

// ✅ For NUMERIC Enums
enum NumericEnum {
  Small,
  Medium,
  Large,
}

// 👇️ ['0', '1', '2', 'Small', 'Medium', 'Large']
console.log(Object.keys(NumericEnum));

// ✅ For STRING Enums
enum StringEnum {
  Small = 'S',
  Medium = 'M',
  Large = 'L',
}

// 👇️ ['Small', 'Medium', 'Large']
console.log(Object.keys(StringEnum));

最后一步是使用 Array.map 方法遍历枚举名称数组，并在每次迭代时返回一个包含名称和值的对象。

如果我们需要一个包含名称或字符串枚举值的数组，我们可以使用 Object.keys() 和 Object.values() 方法。

// ✅ For STRING Enums
enum StringEnum {
  Small = 'S',
  Medium = 'M',
  Large = 'L',
}

const keys2 = Object.keys(StringEnum);
// 👇️ ['Small', 'Medium', 'Large']
console.log(keys2);

const values2 = Object.values(StringEnum);
// 👇️ ['S', 'M', 'L']
console.log(values2);

数字枚举的方法类似，但由于 Object.keys() 方法返回键和值，我们必须过滤掉不需要的值。

// ✅ For NUMERIC Enums
enum NumericEnum {
  Small,
  Medium,
  Large,
}

const names1 = Object.keys(NumericEnum).filter((v) => isNaN(Number(v)));
console.log(names1); // 👉️ ['Small', 'Medium', 'Large']

const values1 = Object.values(NumericEnum).filter((v) => !isNaN(Number(v)));
console.log(values1); // 👉️ [0, 1, 2]