如何用for循环替代switch语句动态生成Quasar Table列定义

我有一个用switch语句实现的Quasar Table列定义生成方法，虽然能正常运行，但代码过于冗长，想用for循环替代。希望写出和原switch功能完全一致的for循环实现。

原switch语句实现 #

const createTableColumns = (numberOfColumns: number) => {
  const tableCols: QTableProps["columns"] = [];
  const numberOfColumnsStr = numberOfColumns.toString();

  switch (numberOfColumnsStr) {
    case "15":
      tableCols.push({
        name: "15",
        align: "center",
        label: "15",
        field: (row) => row.fifteen.value,
        format: (val, row) =>
          row.fifteen.isSlected ? `** ${val} **` : `${val}`,
        sortable: false,
      });
    case "14":
      tableCols.push({
        name: "14",
        align: "center",
        label: "14",
        field: (row) => row.fourteen.value,
        format: (val, row) =>
          row.fourteen.isSlected ? `** ${val} **` : `${val}`,
        sortable: false,
      });
    case "13":
      tableCols.push({
        name: "13",
        align: "center",
        label: "13",
        field: (row) => row.thirteen.value,
        format: (val, row) =>
          row.thirteen.isSlected ? `** ${val} **` : `${val}`,
        sortable: false,
      });
    case "12":
      tableCols.push({
        name: "12",
        align: "center",
        label: "12",
        field: (row) => row.twelve.value,
        format: (val, row) =>
          row.twelve.isSlected ? `** ${val} **` : `${val}`,
        sortable: false,
      });
    case "11":
      tableCols.push({
        name: "11",
        align: "center",
        label: "11",
        field: (row) => row.eleven.value,
        format: (val, row) =>
          row.eleven.isSlected ? `** ${val} **` : `${val}`,
        sortable: false,
      });
    case "10":
      tableCols.push({
        name: "10",
        align: "center",
        label: "10",
        field: (row) => row.ten.value,
        format: (val, row) => (row.ten.isSlected ? `** ${val} **` : `${val}`),
        sortable: false,
      });
    case "9":
      tableCols.push({
        name: "9",
        align: "center",
        label: "9",
        field: (row) => row.nine.value,
        format: (val, row) => (row.nine.isSlected ? `** ${val} **` : `${val}`),
        sortable: false,
      });
    case "8":
      tableCols.push({
        name: "8",
        align: "center",
        label: "8",
        field: (row) => row.eight.value,
        format: (val, row) => (row.eight.isSlected ? `** ${val} **` : `${val}`),
        sortable: false,
      });
    case "7":
      tableCols.push({
        name: "7",
        align: "center",
        label: "7",
        field: (row) => row.seven.value,
        format: (val, row) => (row.seven.isSlected ? `** ${val} **` : `${val}`),
        sortable: false,
      });
    case "6":
      tableCols.push({
        name: "6",
        align: "center",
        label: "6",
        field: (row) => row.six.value,
        format: (val, row) => (row.six.isSlected ? `** ${val} **` : `${val}`),
        sortable: false,
      });
    case "5":
      tableCols.push({
        name: "5",
        align: "center",
        label: "5",
        field: (row) => row.five.value,
        format: (val, row) => (row.five.isSlected ? `** ${val} **` : `${val}`),
        sortable: false,
      });
    case "4":
      tableCols.push({
        name: "4",
        align: "center",
        label: "4",
        field: (row) => row.four.value,
        format: (val, row) => (row.four.isSlected ? `** ${val} **` : `${val}`),
        sortable: false,
      });
    case "3":
      tableCols.push({
        name: "3",
        align: "center",
        label: "3",
        field: (row) => row.three.value,
        format: (val, row) => (row.three.isSlected ? `** ${val} **` : `${val}`),
        sortable: false,
      });

    case "2":
      tableCols.push({
        name: "2",
        align: "center",
        label: "2",
        field: (row) => row.two.value,
        format: (val, row) => (row.two.isSlected ? `** ${val} **` : `${val}`),
        sortable: false,
      });

    case "1":
      tableCols.push({
        name: "1",
        align: "center",
        label: "1",
        field: (row) => row.name,
        format: (val, row) => `${val}`,
        sortable: false,
      });

      break;
    default:
      console.error(`Game: createTableColumns DEFAULT!!!`);
  }

  tableCols.sort((a, b) => parseInt(a.name) - parseInt(b.name));
  return tableCols;
};

我尝试的for循环实现 #

const tableCols2: QTableProps["columns"] = [];
for (let colIndex = 0; colIndex < numberOfColumns; colIndex++) {
  const rowKeyArray = [
    "NotUsed",
    "one",
    "two",
    "three",
    "four",
    "five",
    "six",
    "seven",
    "eight",
    "nine",
    "ten",
    "eleven",
    "twelve",
    "thirteen",
    "fourteen",
    "fifteen",
  ];
  const colNumber: number = colIndex + 1;
  const rowKey: string = rowKeyArray[colIndex];
  const myObj = {
    name: colNumber.toString(),
    align: "center",
    label: colNumber.toString(),
    field: (row) => row[rowKey].value,
    format: (val, row) => (row[rowKey].isSlected ? `** ${val} **` : `${val}`),
    sortable: false,
  };

  tableCols2.push(myObj);
}

正确的for循环实现 #

你的尝试存在两个主要问题：一是第1列的特殊逻辑没处理（原代码第1列取row.name而非row.one.value），二是rowKeyArray的索引对应错误（colIndex=0对应"NotUsed"，但你需要的是colIndex+1对应数组索引）。以下是完全匹配原switch功能的实现：

const createTableColumns = (numberOfColumns: number): QTableProps["columns"] => {
  const tableCols: QTableProps["columns"] = [];
  // 数字对应的对象键名，索引与数字一一对应（1对应one，2对应two...15对应fifteen）
  const numberToKey = [
    "", // 索引0占位，让索引从1开始对应数字1
    "one",
    "two",
    "three",
    "four",
    "five",
    "six",
    "seven",
    "eight",
    "nine",
    "ten",
    "eleven",
    "twelve",
    "thirteen",
    "fourteen",
    "fifteen"
  ];

  for (let colNum = 1; colNum <= numberOfColumns; colNum++) {
    if (colNum === 1) {
      // 第1列特殊处理，直接返回row.name
      tableCols.push({
        name: "1",
        align: "center",
        label: "1",
        field: (row) => row.name,
        format: (val) => `${val}`,
        sortable: false
      });
    } else {
      const key = numberToKey[colNum];
      tableCols.push({
        name: colNum.toString(),
        align: "center",
        label: colNum.toString(),
        field: (row) => row[key].value,
        format: (val, row) => row[key].isSlected ? `** ${val} **` : `${val}`,
        sortable: false
      });
    }
  }

  // 原代码最后保留了排序逻辑，这里因为循环是升序生成，可省略，若需兼容原逻辑可保留
  tableCols.sort((a, b) => parseInt(a.name) - parseInt(b.name));
  return tableCols;
};

关键优化点 #

• 用numberToKey数组建立数字到对象键名的映射，避免重复代码
• 单独处理第1列的特殊逻辑，和原switch行为完全一致
• 循环从1到numberOfColumns，生成的列顺序天然符合排序需求（若不需要原排序逻辑可直接去掉sort）

内容的提问来源于stack exchange，提问作者Loren