JavaScriptで2次元配列の転置（行と列の入れ替え）を行う方法

2次元配列の転置とは

2次元配列の「転置」とは、行と列を入れ替えた新しい配列を作る操作です。たとえば、3行2列の配列を転置すると、2行3列の配列になります。

本記事では、2次元配列を受け取り、その転置配列を返すJavaScript関数を、2つの異なるアプローチで実装する方法を紹介します。

方法1：Array.prototype.forEach() を使う方法

forEachメソッドを使って各行・各要素にアクセスし、行と列のインデックスを反転させながら結果の配列を組み立てていきます。

const arr = [
    [0, 1],
    [2, 3],
    [4, 5]
];

const transpose = arr => {
    const res = [];
    arr.forEach((el, ind) => {
        el.forEach((elm, index) => {
            res[index] = res[index] || [];
            res[index][ind] = elm;
        });
    });
    return res;
};
console.log(transpose(arr));

方法2：Array.prototype.reduce() を使う方法

reduceメソッドを使うと、アキュムレータとして結果配列を保持しながら同様の処理を、より関数型的なスタイルで記述できます。

const arr = [
    [0, 1],
    [2, 3],
    [4, 5]
];

const transpose = arr => {
    let res = [];
    res = arr.reduce((acc, val, ind) => {
        val.forEach((el, index) => {
            acc[index] = acc[index] || [];
            acc[index][ind] = el;
        });
        return acc;
    }, []);
    return res;
};

console.log(transpose(arr));

実行結果

どちらの方法でも、コンソールには以下のように出力されます。元の3行2列の配列が、2行3列の配列へと正しく変換されていることが確認できます。

[ [ 0, 2, 4 ], [ 1, 3, 5 ] ]

ポイントとなるのは res[index] = res[index] || []; の部分です。これは、該当するインデックスの行がまだ存在しない場合に空の配列で初期化するための処理で、この仕組みによって行と列の入れ替えが実現されています。