JavaScriptで2つの配列を交互にマージする方法

本記事では、2つの配列を受け取り、それぞれの要素を交互に取り出しながら1つの配列へマージするJavaScript関数の作成方法を解説します。

やりたいこと

たとえば、次のような2つの配列があるとします。

const arr1 = [4, 3, 2, 5, 6, 8, 9];
const arr2 = [2, 1, 6, 8, 9, 4, 3];

この場合、期待される出力は以下のとおりです。

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

ご覧のとおり、arr1 の1番目の要素、arr2 の1番目の要素、arr1 の2番目の要素、arr2 の2番目の要素……というように、2つの配列から交互に要素が並べ替えられています。

実装コード

以下が実際のコードです。

const arr1 = [4, 3, 2, 5, 6, 8, 9];
const arr2 = [2, 1, 6, 8, 9, 4, 3];

const mergeAlternatively = (arr1, arr2) => {
    const res = [];
    for(let i = 0; i < arr1.length + arr2.length; i++){
        if(i % 2 === 0){
            res.push(arr1[i / 2]);
        }else{
            res.push(arr2[(i - 1) / 2]);
        }
    }
    return res;
};

console.log(mergeAlternatively(arr1, arr2));

コードの仕組み

この関数は、合計 arr1.length + arr2.length 回ループを実行し、インデックスの偶奇によって参照する配列を切り替えています。

• i が偶数の場合：arr1[i / 2] を結果に追加します。
• i が奇数の場合：arr2[(i - 1) / 2] を結果に追加します。

こうすることで、元の配列内での相対的な順序を保ちながら、2つの配列の要素をきれいに交互に並べることができます。

より堅牢な実装（配列の長さが異なる場合）

上記の実装はシンプルですが、2つの配列の長さが異なる場合、短い方の要素を使い切った時点で undefined が混入するおそれがあります。実務では、次のように while 文を使い、各配列の残りの要素を順番に追加していく方法が安全です。

const mergeAlternatively = (arr1, arr2) => {
    const res = [];
    let i = 0, j = 0;
    while (i < arr1.length || j < arr2.length) {
        if (i < arr1.length) res.push(arr1[i++]);
        if (j < arr2.length) res.push(arr2[j++]);
    }
    return res;
};

こちらの実装なら、どちらか一方の配列が先に尽きた場合でも、残りの要素がそのまま末尾に追加されるため、undefined を心配せずに済みます。

出力結果

コンソールには次のように出力されます。

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

まとめ

2つの配列を交互にマージする処理は、インデックスの偶奇を判定する方法でも、ポインタを2つ用意して進める方法でも実装できます。配列の長さが同じであることが保証されているなら前者で十分ですが、一般的なケースを想定するなら後者の while ベースの実装がおすすめです。