JavaScriptで配列を90度回転させる方法

Progateのmosyaで配列を90度回転させる問題があり、なかなか歯ごたえがあったのでメモ。

問題

N x N の配列を90度右に回転させる関数 rotateMatrix を実装してください。
例えば、次のような配列が与えられた場合、

[
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

次のような配列に変えてください。

[
  [7, 4, 1],
  [8, 5, 2],
  [9, 6, 3],
];

回答に必要な知識

• 行列の長さ（length）の考え方👇

配列の長さ	取得方法	意味
行数	matrix.length	外側の配列の要素数
列数	matrix[0].length	各行の要素数

• n × n 行列の作り方
  fromメソッドを使う。

fromメソッド

let arr = Array.from({ length: 3 });
console.log(arr); // [undefined, undefined, undefined]

fromメソッドは上記のように要素数を指定して配列を作ることができる。
上の例ではundefined が3個入った配列ができる。
これだとまだ行列にはなっていないが、第二引数に配列を渡してあげることで、行列を作ることができる。

let matrix = Array.from({ length: 3 }, () => Array(3).fill(0));

Array(N).fill(0）は 長さ N の配列を作って、全部 0 にする という意味。

• mapメソッド
  配列内のすべての要素に同じ処理を適用することができる

const array = [1, 4, 9, 16];
const map = array.map((x) => x * 2);

console.log(map);
// 予想結果: Array [2, 8, 18, 32]

上記の例では、mapを使ってすべての要素を2倍している。

• reverseメソッド
  配列の要素を逆順に並び替えることができる。

let favorite = ['curry', 'money', 'sunny'];
console.log(favorite.reverse); // sunny, money ,curry

解答コード

function rotateMatrix(matrix) {
  // この関数の続きを書いてください
  // まず行列を反転させる
  const n = matrix.length; // nに配列の行数を代入
  let transposed = Array.from({length:n}, () => Array(n).fill(0)); // 長さn、要素数nの配列を作りすべて0にする
    for (let i = 0; i < n; i++) {
      for(let j = 0; j < n; j++) {
        transposed[i][j] = matrix[j][i]; // 0をmatrixの反転させた値で上書きする
      }
  } // 行列を操作する際の定型文
  // 次に各行の要素を反転させる
  return transposed.map(row => (
    row.reverse())
    );
}

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

console.log(rotateMatrix(matrix));
// [
//     [7, 4, 1],
//     [8, 5, 2],
//     [9, 6, 3]
// ]

感想

ChatGPTさまさまで何とか解けました。
ただ、自分で1からコードを思いつくということは到底不可能…
ま、知らないことが多すぎるからしょうがないね！
数学のパズルを解いているみたいで楽しかったです。