JavaScriptで2つの配列をマージして重複を削除する方法

JavaScriptでは、2つの配列を結合しつつ、重複する要素を取り除いた新しい配列を作成したいケースがよくあります。本記事では、その実装方法を具体的なコード例とともに解説します。

問題の定義

次のような2つの配列があると仮定します。

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

この2つの配列を引数として受け取り、重複する要素を排除した(各要素が1回だけ出現する)新しい配列を返すJavaScript関数を作成する必要があります。

実装例：ループ処理を使った方法

まずは、基本的なループ処理を使った実装例を見てみましょう。

const arr1 = [2, 4, 5, 3, 7, 8, 9];
const arr2 = [1, 4, 5, 2, 3, 7, 6];
const mergeArrays = (first, second) => {
    const { length: l1 } = first;
    const { length: l2 } = second;
    const res = [];
    let temp = 0;
    for(let i = 0; i < l1 + l2; i++){
        if(i >= l1){
            temp = i - l1;
            if(!res.includes(first[temp])){
                res.push(first[temp]);
            };
        }else{
            temp = i;
            if(!res.includes(second[temp])){
                res.push(second[temp]);
            };
        };
    };
    return res;
};
console.log(mergeArrays(arr1, arr2));

コードの解説

このコードでは、2つの配列の合計の長さ分だけループを回します。前半のループでは2番目の配列の要素を、後半のループでは1番目の配列の要素を処理します。各要素について、結果配列にincludes()で存在確認を行い、まだ含まれていない場合のみpush()で追加することで、重複を防いでいます。

出力結果

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

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

両方の配列に含まれていた 2、3、4、5、7 がそれぞれ1回だけ出現しており、重複が正しく削除されていることがわかります。

よりシンプルな方法：Setとスプレッド構文

実務では、Setオブジェクトとスプレッド構文を組み合わせることで、上記の処理を1行で簡潔に記述できます。

const mergeArrays = (first, second) => {
    return [...new Set([...first, ...second])];
};
console.log(mergeArrays(arr1, arr2));

Setは重複する値を自動的に排除するデータ構造です。そのため、配列を結合してSetに変換し、再度スプレッド構文で配列に戻すだけで重複削除が完了します。パフォーマンス面でも、includes()を繰り返し呼び出す方法よりも効率的です。

まとめ

2つの配列をマージして重複を削除するには、ループ処理で1つずつ存在確認する方法と、Setを活用する方法があります。特別な理由がない限り、簡潔で高速なSetを使った方法をおすすめします。