如何用JavaScript创建指定列数的动态网格行数组？

我有一个表示网格行数据的数组，格式如下：

let row = [rowId,'string value', 'string value 2', 'string value 3'];

我需要根据可变的列数动态生成行数据数组，即初始化一个包含id及X列数据的数组，格式为[id, 'col-1', 'col-2', ...]。

目前我用switch枚举的繁琐方法实现，代码如下：

getNewRow(maxKey: number, rowWidth: number){
    switch (rowWidth){
      case 1:{
        return [maxKey, 'col 1'];
        break;  
      }
      case 2:{
        return [maxKey, 'column 1', 'col 2'];
        break;  
      }
      case 3:{
        return [maxKey, 'column 1', 'col 2', 'col 3'];
        break;  
      }
      case 4:{
        return [maxKey, 'column 1', 'col 2', 'col 3', 'col 4'];
        break;  
      }
      case 5:{
        return [maxKey, 'column 1', 'col 2', 'col 3', 'col 4', 'col 5'];
        break;  
      }
      case 6:{
        return [maxKey, 'column 1', 'col 2', 'col 3', 'col 4', 'col 5', 'col 6'];
        break;  
      }
      case 7:{
        return [maxKey, 'column 1', 'col 2', 'col 3', 'col 4', 'col 5', 'col 6', 'col 7'];
        break;  
      }
      case 8:{
        return [maxKey, 'column 1', 'col 2', 'col 3', 'col 4', 'col 5', 'col 6', 'col 7', 'col 8'];
        break;  
      }
      case 9:{
        return [maxKey, 'column 1', 'col 2', 'col 3', 'col 4', 'col 5', 'col 6', 'col 7', 'col 8', 'col 9'];
        break;  
      }
      case 10:{
        return [maxKey, 'column 1', 'col 2', 'col 3', 'col 4', 'col 5', 'col 6', 'col 7', 'col 8', 'col 9', 'col 10'];
        break;  
      }
    }

其中maxKey用于确保id列是唯一值。

我的问题：

1. 是否可以动态生成这类行数据？
2. 能否按需创建具有动态宽度（基于列数）的数组？

当然可以，完全不需要用switch硬编码所有情况，用循环或数组生成方法就能轻松实现动态生成。

基础循环实现 #

getNewRow(maxKey: number, rowWidth: number) {
  // 初始化数组，第一个元素为唯一id
  const row = [maxKey];
  // 循环生成对应数量的列数据
  for (let i = 1; i <= rowWidth; i++) {
    // 保持原格式：第一列用'column'，其余用'col'
    row.push(i === 1 ? `column ${i}` : `col ${i}`);
  }
  return row;
}

简洁函数式写法（Array.from） #

如果偏好更简洁的风格，可用Array.from直接生成列数据，再与id合并：

getNewRow(maxKey: number, rowWidth: number) {
  const cols = Array.from({ length: rowWidth }, (_, index) => 
    index === 0 ? `column ${index + 1}` : `col ${index + 1}`
  );
  return [maxKey, ...cols];
}

说明 #

• 两种方法都能根据rowWidth的值动态生成对应数量的列元素，无论数值大小都无需修改代码。
• 完全匹配你原有的格式规则：第一列文本为column 1，后续列依次为col N。
• maxKey作为唯一id始终放在数组首位，符合需求。

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