JavaScript 竖着遍历数组：被忽视的二维数组操作技巧

一、竖着遍历数组的场景与需求

在JavaScript开发中，数组遍历是高频操作，但多数开发者更熟悉横向遍历（即按行处理）。然而，在处理二维数组（矩阵）时，竖着遍历（按列处理）的需求同样普遍。例如：

1. 数据可视化：渲染表格或图表时，需逐列提取数据。
2. 矩阵运算：计算每列的和、平均值或进行转置操作。
3. 游戏开发：处理棋盘类游戏（如五子棋）的列状态检测。
4. 图像处理：逐列扫描像素数据（如边缘检测）。

若未掌握竖着遍历的技巧，开发者可能被迫通过嵌套循环或转置数组间接实现，导致代码冗余或性能损耗。

二、竖着遍历数组的实现方法

方法1：双重循环按列访问

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
// 竖着遍历：外层循环控制列，内层循环控制行
for (let col = 0; col < matrix[0].length; col++) {
  console.log(`列 ${col} 的值:`);
  for (let row = 0; row < matrix.length; row++) {
    console.log(matrix[row][col]);
  }
}

适用场景：通用二维数组，列数固定或已知。
注意点：需确保所有行的长度一致，否则需添加边界检查。

方法2：使用map与索引结合

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
// 提取第2列（索引1）
const column = matrix.map(row => row[1]);
console.log(column); // 输出: [2, 5, 8]

优势：函数式编程风格，简洁易读。
局限：仅适用于提取单列，若需多列需多次调用。

方法3：动态生成列遍历函数

function traverseColumns(matrix, callback) {
  const cols = matrix[0]?.length || 0;
  for (let col = 0; col < cols; col++) {
    const columnData = matrix.map(row => row[col]);
    callback(columnData, col);
  }
}
// 使用示例
traverseColumns(matrix, (colData, colIndex) => {
  console.log(`列 ${colIndex} 的数据:`, colData);
});

价值：封装复用逻辑，支持自定义列处理逻辑。

三、性能优化与边界处理

1. 稀疏数组的兼容性

若二维数组存在行长度不一致的情况（稀疏数组），需添加校验：

function safeTraverseColumns(matrix) {
  const maxCols = Math.max(...matrix.map(row => row.length));
  for (let col = 0; col < maxCols; col++) {
    const column = [];
    for (const row of matrix) {
      column.push(row[col] ?? null); // 处理undefined
    }
    console.log(column);
  }
}

2. 大数据量下的性能

对于超大规模矩阵（如10000x10000），双重循环可能导致性能瓶颈。此时可考虑：

• 分块处理：将矩阵分割为子块，逐块遍历。
• Web Worker：将计算任务移至后台线程。
• TypedArray：若数据为数值，使用Float32Array等优化存储。

四、实际应用案例

案例1：矩阵转置

通过竖着遍历实现矩阵转置（行变列）：

function transpose(matrix) {
  return matrix[0].map((_, colIndex) => 
    matrix.map(row => row[colIndex])
  );
}
const original = [[1, 2], [3, 4], [5, 6]];
const transposed = transpose(original);
console.log(transposed); // 输出: [[1, 3, 5], [2, 4, 6]]

案例2：列求和

计算每列的和并返回结果数组：

function columnSums(matrix) {
  const sums = [];
  for (let col = 0; col < matrix[0].length; col++) {
    let sum = 0;
    for (let row = 0; row < matrix.length; row++) {
      sum += matrix[row][col];
    }
    sums.push(sum);
  }
  return sums;
}
const matrix = [[1, 2], [3, 4], [5, 6]];
console.log(columnSums(matrix)); // 输出: [9, 12]

五、常见误区与解决方案

1. 误区：直接假设所有行长度相同。
   解决：遍历前计算最大列数，或使用try-catch捕获索引错误。

2. 误区：在竖着遍历时修改原数组导致意外行为。
   解决：若需修改数据，优先创建副本：

   const newMatrix = matrix.map(row => [...row]);

3. 误区：忽略空数组或非二维数组的输入。
   解决：添加前置校验：

   function isMatrix(arr) {
     return Array.isArray(arr) && arr.length > 0 && arr.every(row => Array.isArray(row));
   }

六、总结与建议

竖着遍历数组是JavaScript中处理二维数据的核心技能，其关键点包括：

1. 明确需求：区分按行与按列的操作场景。
2. 选择方法：根据数据规模、性能要求选择循环或函数式方法。
3. 边界处理：始终考虑稀疏数组、空输入等异常情况。
4. 性能调优：对大数据量采用分块或并行处理。

实践建议：

• 封装通用的列遍历工具函数，提升代码复用性。
• 使用TypeScript时，为二维数组定义明确的类型：

  type Matrix<T> = Array<Array<T>>;

• 在算法题或面试中，主动提及竖着遍历的思路可能成为加分项。

通过掌握这一技巧，开发者能更高效地处理表格、矩阵等结构化数据，为复杂业务逻辑的实现奠定基础。