【JavaScript】2つの配列を結合して重複を1回だけ残す方法

問題の概要

次のような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));

出力結果

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

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

コードの解説

この関数の動作を順番に確認してみます。

• まず、分割代入によって両方の配列の長さを取得し、それぞれ l1・l2 に格納します。
• forループは合計 l1 + l2 回繰り返されます。インデックスが l1 未満の間は second 配列の要素を、l1 以上になった時点で first 配列の要素を処理対象に切り替えます。
• 各要素については、結果配列 res にまだ含まれていない場合のみpushするため、重複が自動的に排除されます。

このように Array.prototype.includes() による存在チェックを組み合わせることで、2つの配列を結合しながら重複のない配列をシンプルに生成できます。

より簡潔な代替手段：Setオブジェクトの活用

モダンなJavaScriptでは、Set を使うことで同じ処理をさらに短く記述できます。

const mergeArrays = (first, second) => [...new Set([...second, ...first])];

Set は重複する値を保持しない特性を持つため、スプレッド構文で2つの配列を展開して渡すだけで、重複排除済みの新しい配列が得られます。また、includes() の線形探索を毎回実行する方式に比べて、大規模な配列でも高速に動作するというメリットがあります。