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

この記事では、2つの配列を受け取り、それぞれの要素を交互に並べた新しい配列を返す処理をJavaScriptで実装する方法を解説します。

交互にマージする仕組み

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

const arr1 = [34, 21, 2, 56, 17];
const arr2 = [12, 86, 1, 54, 28];

これらの配列から「34 → 12 → 21 → 86 → ...」というように、arr1とarr2から順番に1つずつ要素を取り出して交互に並べた新しい配列を作成したい、というのが今回の目的です。

基本的な考え方はシンプルで、両方の配列を同時にループ処理しながら、交互に要素を取り出しては新しい配列へ追加していくというものです。どちらの配列から直前に要素を取得したかを判定するために、各配列ごとのカウンタ変数を使用します。

コード例

const arr1 = [34, 21, 2, 56, 17];
const arr2 = [12, 86, 1, 54, 28];
let run = 0, first = 0, second = 0;
const newArr = [];
while(run < arr1.length + arr2.length){
    if(first > second){
        newArr[run] = arr2[second];
        second++;
    }else{
        newArr[run] = arr1[first];
        first++;
    }
    run++;
};
console.log(newArr);

コードのポイント

• run: 新しい配列に格納済みの要素数（whileループの継続条件として使用）
• first: arr1から取り出した要素数
• second: arr2から取り出した要素数

firstがsecondより大きい場合（直前の取得元がarr1だった場合）は、次はarr2から要素を取り出します。逆の場合はarr1から取り出します。この比較を繰り返すことで、常に交互に要素が並ぶ仕組みになっています。

なお、このロジックが正しく動作するのは両方の配列の長さが同じ場合です。長さが異なる場合は、短い方の配列の範囲外を参照してundefinedが混入するため、別途チェック処理を加える必要があります。

実行結果

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

[
    34, 12, 21, 86, 2,
    1, 56, 54, 17, 28
]

このように、arr1とarr2の要素が完全に交互になった新しい配列が生成されていることが確認できます。