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); } 

六、总结对比表

方法	代码复杂度	可读性	灵活性	适用场景
字面量定义	★☆☆☆☆	★★★★★	★★☆☆☆	静态数据
Array.from()	★★★☆☆	★★★★☆	★★★★☆	动态生成
循环初始化	★★★★☆	★★★☆☆	★★★★★	复杂初始化逻辑
函数式编程	★★★★★	★★★★☆	★★★★★	需要高度复用代码

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

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