More than 3 years have passed since last update.

【解説】二次元配列を転置(transpose)するJavaScriptワンライナー

Posted at 2020-03-07

二次元配列を転置(transpose)するJavaScriptワンライナーをネットで見つけて使えることはすぐにわかったのですが、どのように動作するのかがすぐにわからなかったので解説を書いてみました。

参考

array[0].map((col, i) => array.map(row => row[i]));

2つの部分に分けて考えるとわかりやすいです。

まず、置換前の各列をループします。これが転置後二次元配列の各行になります。それが、

array[0].map((col, i) => ...));

の部分になります。
インデックス0の行を取り出してmapすることで各列のインデックス(変数iに入る)を使えるようにしています。forループを使うより短く書けますね。

それから、...の部分が実際に置換後の各行を作っているところです。それが、

array.map(row => row[i])

の部分です。

置換前の二次元配列の列を一次元配列にして返します。
たとえば、iが0の場合、array.map(row => row[0])となり、これはもとの二次元配列の1列目を返します。

これをすべての列に対して行いくっつければ転置した二次元配列の完成です。

まとめると、

array[0].map((col, i) =>       // 二次元配列の各列をループして、
    array.map(row => row[i])   // 各列を取り出して一次元配列にして、
);                             // くっつける。

となります。