将一串字符按照指定长度生成一个二维数组

const locationinfo = ‘OOOOOOOOOOXOOOOOOOOOOXOOOOOXOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOXOOOOOOOOOOOOOOOOOOXOOOOOOOOXOOOOOOOOOOOXOOOOOOOOOOXOOOOOOOOXXOOOOOOOOOOOOOOOOXOOOOOOOOOOOOOOOOXOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO’ ；
const X = reactive([
    '1', '2', '3', '4', '5', '6', '7', '8', '9',
    'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J',
    'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U'
  ])
  const Y = reactive([
    '1', '2', '3', '4', '5', '6', '7', '8', '9',
    'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J',
    'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U'
  ]) 
每 11 个字符为一列（Y 轴，从下往上），共 20 列（X 轴，从左往右）。value 为 ${X列标签}${Y行标签}，key 为该列内的第几个元素（1 到 11），info 为对应字符。并且把第 1 个字符放在第一列的最后一位（底部），第 11 个字符放在第一列的第一位（顶部）

------------------------------------------------------------------

• 结构：外层 11 个元素（行），内层 20 个元素（列）。
• Key 值：现在的 key 表示该字符在原始字符串 locationinfo 中的索引位置（从 1 开始计数，即 1 到 220）。

完整代码

const locationinfo = 'OOOOOOOOOOXOOOOOOOOOOXOOOOOXOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOXOOOOOOOOOOOOOOOOOOXOOOOOOOOXOOOOOOOOOOOXOOOOOOOOOOXOOOOOOOOXXOOOOOOOOOOOOOOOOXOOOOOOOOOOOOOOOOXOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO';

const X = [
    '1', '2', '3', '4', '5', '6', '7', '8', '9',
    'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J',
    'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U'
];

const Y = [
    '1', '2', '3', '4', '5', '6', '7', '8', '9',
    'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J',
    'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U'
];

function generateFinalGrid(str, xLabels, yLabels) {
    const result = [];
    const rowsPerCol = 11; // 原始数据每列的高度
    const totalCols = 20;  // 总列数

    // 外层循环：构建视觉上的“行”
    // 视觉上第一行对应物理上的顶部（Y轴索引 10，即 'B'）
    // 视觉上最后一行对应物理上的底部（Y轴索引 0，即 '1'）
    // 所以从 10 倒序遍历到 0
    for (let yIndex = rowsPerCol - 1; yIndex >= 0; yIndex--) {
        const rowData = [];

        // 内层循环：构建视觉上的“列” (从左到右，X轴 0 到 19)
        for (let xIndex = 0; xIndex < totalCols; xIndex++) {
            
            // 计算原始字符串中的索引位置 (0-based)
            // 公式：(当前列号 * 11) + 当前行号(原始从底向上的索引)
            const rawIndex = (xIndex * rowsPerCol) + yIndex;
            
            const char = str[rawIndex];
            const labelX = xLabels[xIndex];
            const labelY = yLabels[yIndex];

            rowData.push({
                value: `${labelX}${labelY}`, // 坐标标签，如 1B
                key: rawIndex + 1,           // 修改点：在 locationinfo 中的第几位 (1-220)
                info: char                   // 'O' 或 'X'
            });
        }

        result.push(rowData);
    }

    return result;
}

// 执行生成
const finalData = generateFinalGrid(locationinfo, X, Y);

// --- 验证打印 ---
console.log("数据结构: " + finalData.length + "行 x " + finalData[0].length + "列");

// 验证左上角 (视觉第一行，第一列) -> 应该是原始第一列的顶部
// 原始第一列范围是 0-10。顶部是 index 10。
console.log("左上角元素:", finalData[0][0]); 
// 预期 key: 11 (因为 index 10 是第 11 位)
// 预期 value: 1B

// 验证左下角 (视觉最后一行，第一列) -> 应该是原始第一列的底部
// 原始第一列范围是 0-10。底部是 index 0。
console.log("左下角元素:", finalData[10][0]); 
// 预期 key: 1 (因为 index 0 是第 1 位)
// 预期 value: 11

结果数据说明 finalData

1. finalData[0] (数组) : 对应视觉上的最顶上一行 (Y坐标为 'B')。

2. finalData[10] (数组) : 对应视觉上的最底下一行 (Y坐标为 '1')。

3. key: 对应原始字符串 locationinfo 的位置。

   • 例如，第一列最底部的元素，key 为 1。
   • 第一列最顶部的元素，key 为 11。
   • 第二列最底部的元素，key 为 12。