前端如何把eunm变成数组列表

前端可以通过枚举（enum）类型转换为数组列表的方法包括：使用Object.keys()、Object.values()、Object.entries()。其中，Object.entries() 可以获取枚举的键值对数组，并可以用来详细描述。

枚举（enum）是 TypeScript 中一种非常有用的数据结构，它允许开发者定义一组命名的常量。尽管在定义时枚举是一个对象，但在很多情况下，我们需要将其转换为数组，以便在前端进行展示或处理。这通常通过以下方法实现：

Object.keys(): 获取枚举的所有键，并转换为数组。

Object.values(): 获取枚举的所有值，并转换为数组。

Object.entries(): 获取枚举的所有键值对，并转换为二维数组。

下面将详细介绍如何使用 Object.entries() 方法将枚举转换为数组列表。

一、枚举的定义与基本操作

1、什么是枚举

枚举（enum）是一种特殊的类，用于表示一组命名的常量。它在 TypeScript 中非常有用，尤其是在我们希望有一组固定的值时，比如一周的天数、颜色、状态等。

enum Color {
  Red,
  Green,
  Blue
}

2、枚举的基本用法

枚举可以通过名称访问其值，也可以通过值访问其名称。这在处理数据和调试时非常有用。

let c: Color = Color.Green;
console.log(c);           // 输出：1
console.log(Color[1]);    // 输出：Green

二、将枚举转换为数组列表的基本方法

1、使用Object.keys()方法

Object.keys()方法可以获取枚举的所有键，并将其转换为数组。

const enumArray = Object.keys(Color);
console.log(enumArray); // 输出：["Red", "Green", "Blue"]

此方法会返回一个字符串数组，包含枚举的所有键。

2、使用Object.values()方法

Object.values()方法可以获取枚举的所有值，并将其转换为数组。

const enumValues = Object.values(Color);
console.log(enumValues); // 输出：[0, 1, 2]

此方法会返回一个数组，包含枚举的所有值。

3、使用Object.entries()方法

Object.entries()方法可以获取枚举的所有键值对，并将其转换为二维数组。

const enumEntries = Object.entries(Color);
console.log(enumEntries); // 输出：[["Red", 0], ["Green", 1], ["Blue", 2]]

此方法会返回一个二维数组，每个元素包含一个键值对。

三、详细介绍Object.entries()方法及其应用

1、理解Object.entries()方法

Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用for…in循环遍历该对象时返回的顺序一致（区别在于for-in循环还会遍历原型链中的属性）。

const entries = Object.entries(Color);
entries.forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

2、实际应用场景

在前端开发中，将枚举转换为数组列表的场景非常常见。例如，我们需要将枚举值显示在下拉列表中，或者用于表单选择项。

示例：将枚举值显示在下拉列表中

import React from 'react';
enum Status {
  Active,
  Inactive,
  Pending
}
const StatusDropdown = () => {
  const statusEntries = Object.entries(Status).filter(([key, value]) => typeof value === 'number');
  return (
    <select>
      {statusEntries.map(([key, value]) => (
        <option key={value} value={value}>
          {key}
        </option>
      ))}
    </select>
  );
};
export default StatusDropdown;

在这个示例中，我们使用Object.entries()方法将Status枚举转换为键值对数组，并过滤掉非数字类型的值。然后，我们将其映射为下拉列表中的选项。

四、优化与实践

1、使用泛型封装转换函数

为了提高代码的可复用性，可以封装一个泛型函数，将枚举转换为数组列表。

function enumToArray<T>(enumObj: T): [string, number][] {
  return Object.entries(enumObj).filter(([key, value]) => typeof value === 'number') as [string, number][];
}
// 使用示例
const statusArray = enumToArray(Status);
console.log(statusArray); // 输出：[["Active", 0], ["Inactive", 1], ["Pending", 2]]

2、结合项目管理系统的应用

在实际项目中，枚举通常用于描述一些固定的状态或类型。例如，在研发项目管理系统PingCode或通用项目协作软件Worktile中，可能有任务状态枚举、优先级枚举等。在这些系统中，将枚举转换为数组列表，可以方便地在UI中进行展示和选择。

enum TaskStatus {
  ToDo,
  InProgress,
  Done
}
// 将TaskStatus枚举转换为数组列表
const taskStatusArray = enumToArray(TaskStatus);
// 在项目管理系统中使用
const TaskStatusDropdown = () => (
  <select>
    {taskStatusArray.map(([key, value]) => (
      <option key={value} value={value}>
        {key}
      </option>
    ))}
  </select>
);

通过这种方式，可以将枚举值直观地展示在用户界面中，提升用户体验。

五、总结

枚举（enum）在TypeScript中是非常有用的数据结构，通过将枚举转换为数组列表，可以更方便地在前端进行展示和处理。常用的方法包括Object.keys()、Object.values()和Object.entries()。其中，Object.entries()方法尤其适用于获取键值对数组，并在实际应用中非常有用。在实际项目中，结合研发项目管理系统PingCode和通用项目协作软件Worktile，可以更好地管理和展示枚举数据，提高开发效率和用户体验。