JavaScriptで複数の配列から要素を交互に取り出して1つの配列にまとめる方法

問題

今回は、任意の個数の配列を引数として受け取り、それらすべての配列から要素を交互に（順番に一つずつ）取り出して、新しい配列を組み立てるJavaScript関数を作成します。

例えば、関数への入力が次のような場合を考えてみましょう。

入力

const arr1 = [1, 2, 3, 4];
const arr2 = [11, 12, 13, 14];
const arr3 = ['a', 'b', 'c'];

出力

const output = [1, 11, 'a', 2, 12, 'b', 3, 13, 'c', 4, 14];

ご覧のとおり、まず各配列の先頭要素（1、11、'a'）、次に各配列の2番目の要素（2、12、'b'）というように、交互に要素が並んでいます。また、配列の長さが異なっていても問題ありません。arr3 のように短い配列の場合は、存在する要素だけが出力に含まれます。

解決策：実装コード

以下がその実装例です。

const arr1 = [1, 2, 3, 4];
const arr2 = [11, 12, 13, 14];
const arr3 = ['a', 'b', 'c'];

const pickElements = (...arrs) => {
    const res = [];
    // 一番長い配列の長さを取得
    const max = Math.max(...arrs.map(el => el.length));
    for(let i = 0; i < max; i++){
        for (let j = 0; j < arrs.length; j++){
            if(arrs[j][i]){
                res.push(arrs[j][i]);
            }
        };
    };
    return res;
};
console.log(pickElements(arr1, arr2, arr3));

出力

[ 1, 11, 'a', 2, 12, 'b', 3, 13, 'c', 4, 14 ]

コードの解説

処理の流れを順番に見ていきましょう。

• 可変長引数（...arrs）： レストパラメータを使うことで、渡される配列の個数がいくつであっても柔軟に受け取れるようになっています。
• 最大長の算出： map() ですべての配列の長さを取り出し、Math.max() でその最大値を求めます。これが外側ループの回転数になります。
• 二重ループによる交互取得： 外側のループでインデックス i を進めながら、内側のループで各配列 j の i 番目の要素を順番に取り出します。これにより「先頭要素 → 各配列の2番目 → …」という交互の並びが自然に実現されます。
• 存在チェック： 配列の長さが異なる場合、範囲外のインデックスにアクセスすると undefined になるため、要素が存在するときだけ push しています。

注意点：falsyな値がスキップされるケース

上記のコードでは if(arrs[j][i]) という条件で存在判定を行っていますが、これはtruthyチェックのため、0 や ''（空文字列）、false といった値が含まれていると誤ってスキップされてしまいます。

より安全にしたい場合は、in 演算子を使って次のように書き換えるのがおすすめです。

if (i in arrs[j]) {
    res.push(arrs[j][i]);
}

こうすることで、0 や空文字列などのfalsyな値も正しく出力に含まれるようになります。

別のアプローチ：モダンな書き方

より宣言的なスタイルが好みであれば、Array.from() と flatMap() を使った次のような実装も可能です。

const pickElements = (...arrs) => {
    const max = Math.max(...arrs.map(a => a.length));
    return Array.from({ length: max }, (_, i) =>
        arrs.map(a => a[i]).filter(el => el !== undefined)
    ).flat();
};

こちらも同じ結果になります。ループを明示的に書くか、高階関数で簡潔に表現するかは、チームのコーディング規約や読みやすさの観点から選ぶとよいでしょう。