如何将二维数组arr1的列元素转存到arr2？解决push报错问题

需求描述 #

现有二维数组arr1：

const arr1 = [
  ['    ', '[H] ', '    '],
  ['[W] ', '[B] ', '    '],
  ['[S] ', '    ', '[M]']
];

需要将其转置：把每个子数组的索引0元素收集到arr2[0]，索引1元素收集到arr2[1]，最终得到目标数组arr2：

const arr2 = [
  ['    ', '[W] ', '[S] '],
  ['[H] ', '[B] ', '    '],
  ['    ', '    ', '[M]']
];

报错原因分析 #

你写的代码出现TypeError: Cannot read properties of undefined (reading 'push')，核心问题有两个：

1. arr2初始是空数组，arr2[i]在未初始化时是undefined，直接调用push自然报错；
2. 循环逻辑完全搞反：内层遍历的是子数组的元素而非列索引，根本没法正确收集对应位置的元素。

正确实现方案 #

方案一：嵌套循环（手动初始化子数组） #

先根据原数组的列数初始化arr2的子数组，再按列->行的顺序遍历赋值：

const arr1 = [
  ['    ', '[H] ', '    '],
  ['[W] ', '[B] ', '    '],
  ['[S] ', '    ', '[M]']
];

const arr2 = [];
// 先初始化arr2的每个子数组（原数组有多少列，arr2就有多少个子数组）
for (let col = 0; col < arr1[0].length; col++) {
  arr2[col] = [];
}

// 遍历原数组的每一行
for (let row = 0; row < arr1.length; row++) {
  // 遍历当前行的每一列
  for (let col = 0; col < arr1[row].length; col++) {
    // 把原数组[row][col]放到arr2[col]的末尾
    arr2[col].push(arr1[row][col]);
  }
}

console.log(arr2); // 得到目标数组

方案二：用数组方法简化（更简洁） #

利用map方法一行实现转置，逻辑更清晰：

const arr1 = [
  ['    ', '[H] ', '    '],
  ['[W] ', '[B] ', '    '],
  ['[S] ', '    ', '[M]']
];

// 遍历原数组的列，每一列对应arr2的一行
const arr2 = arr1[0].map((_, colIndex) => {
  // 收集每一行的第colIndex个元素
  return arr1.map(row => row[colIndex]);
});

console.log(arr2); // 得到目标数组

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