用 JavaScript 來寫出轉置矩陣的方式

久違的邏輯時間～

簡述

假設我有以下陣列：

const array = [
  [1, 2, 3],
  [1, 2, 3],
  [1, 2, 3],
  [1, 2, 3]
]

我希望轉置後變成這樣：

;[
  [1, 1, 1, 1],
  [2, 2, 2, 2],
  [3, 3, 3, 3]
]

第一種方式

這裡的思路是這樣：

1. 先用一層迴圈遍歷每個 row
2. 每一圈都建立一個新的 array
3. 接著在用第二層迴圈遍歷每個 row
4. 這時候第二層迴圈就可以利用外層迴圈的 i，來取出第 j 個 row 的第 i 個值

最後一個步驟最重要，但也比較難懂一些，建議搭配下面的 code 多想幾遍。

簡單來說原理就是外面的迴圈一定要等裡面的迴圈跑完才會跑下一圈，所以可以確保在跑 j 迴圈的時候 i 的值是固定的，所以就可以達成這樣的效果：

• array[0][0]
• array[1][0]
• array[2][0]
• …

const array = [
  [1, 2, 3],
  [1, 2, 3],
  [1, 2, 3],
  [1, 2, 3]
]

const newArray = []

for (let i = 0; i < array.length; i++) {
  newArray.push([])
  for (let j = 0; j < array.length; j++) {
    newArray[i].push(array[j][i])
  }
}

第二種方式

我先寫簡化過後的版本，只要一行就搞定：

function transpose(matrix) {
  return matrix[0].map((col, i) => matrix.map((row) => row[i]))
}

但這樣一定看不懂，所以一樣來拆解這個流程：

const array = [
  [1, 2, 3],
  [1, 2, 3],
  [1, 2, 3],
  [1, 2, 3]
]
// 第一層 map
const newArray3 = []
for (let i = 0; i < array[0].length; i++) {
  // 第二層 map
  const tempArray = []
  for (let j = 0; j < array.length; j++) {
    tempArray.push(array[j][i])
  }
  newArray3.push(tempArray)
}

你仔細看就會發現這跟第一種作法的思路是差不多的，重點都是要拿出：

• array[0][0]
• array[1][0]
• array[2][0]
• …

只是這邊是先遍歷 column，藉此取得 column 的長度，接著在遍歷每個 row，一樣利用 i 會等 j 跑完的概念來把每個 row 的第 i 個值拿出來產生一個新的陣列，最後再包一層陣列來產出最後的結果。（這邊聽不懂的話，建議你先回上面把第一種弄懂再回來看，應該會好理解一些）