JavaScript如何输出4行3列的二维数组

# JavaScript如何输出4行3列的二维数组

在JavaScript中处理二维数组是常见的数据操作需求，特别是在处理表格数据、矩阵运算等场景时。本文将详细介绍4种实现4行3列二维数组的方法，并分析每种方案的优缺点。

## 一、基础嵌套数组定义法

最直接的方式是通过嵌套数组字面量定义：

```javascript
const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
  [10, 11, 12]
];

// 输出验证
console.log(matrix);
console.log("行数:", matrix.length);       // 4
console.log("列数:", matrix[0].length);   // 3

优点： - 直观易读 - 适合静态数据初始化

缺点： - 手动编写效率低 - 不适合大规模数据

二、Array.from()动态生成法

使用ES6的Array.from()可以动态创建二维数组：

const rows = 4;
const cols = 3;

const matrix = Array.from({ length: rows }, () => 
  Array.from({ length: cols }, (_, i) => i + 1)
);

// 输出结果
matrix.forEach(row => console.log(row.join(' ')));

技术要点： 1. 外层Array.from创建行数组 2. 内层回调函数创建每列的数组 3. 通过索引参数i实现自动编号

三、循环初始化法

传统for循环方案适合需要复杂初始化的场景：

const matrix = [];
let counter = 1;

for (let i = 0; i < 4; i++) {
  matrix[i] = [];
  for (let j = 0; j < 3; j++) {
    matrix[i][j] = counter++;
  }
}

// 格式化输出
console.log("┌─────────────┐");
matrix.forEach(row => {
  console.log(`│ ${row.map(num => 
    num.toString().padStart(2)).join(' │ ')} │`);
});
console.log("└─────────────┘");

增强功能： - 支持自定义起始值 - 可添加边界装饰符号 - 数字对齐显示

四、函数式编程方案

结合map和fill方法实现函数式风格：

const generateMatrix = (rows, cols, generator) => 
  [...Array(rows)].map((_, rowIdx) => 
    [...Array(cols)].map((_, colIdx) => 
      generator(rowIdx, colIdx)
    )
  );

// 使用示例
const result = generateMatrix(4, 3, (row, col) => 
  `R${row+1}C${col+1}`
);

// 输出
console.table(result);

优势： - 高度可复用 - 支持自定义值生成逻辑 - 使用console.table增强可视化

五、特殊场景处理

1. 不规则二维数组

const jaggedArray = [
  [1, 2],
  [3, 4, 5],
  [6],
  [7, 8, 9, 10]
];

// 安全访问示例
console.log(jaggedArray[3]?.[2] ?? 'undefined'); 

2. 类型化数组（高性能场景）

const typedMatrix = new Array(4);
for (let i = 0; i < 4; i++) {
  typedMatrix[i] = new Int32Array(3);
}

六、总结对比表

选择合适的方法需要根据具体场景：简单演示推荐字面量法，工程化开发建议使用函数式方案，性能敏感场景可考虑类型化数组。

最佳实践提示：在真实项目中，建议将二维数组操作封装为独立模块，并添加完善的边界检查，避免出现undefined访问错误。 “`