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訪問錯誤。 “`