【JavaScript】配列から重複する要素を完全に削除する方法

今回は「配列を受け取り、その中から重複している値をすべて取り除いた新しい配列を返す関数」を作成する方法を解説します。

ポイントは、単なる重複排除（ユニーク化）とは異なり、元の配列で2回以上出現した値は新しい配列に一切含めないという点です。つまり、1度しか登場しなかった要素だけが残ります。

入力と出力のイメージ

たとえば、次のような配列が入力されたとします。

const arr = [763, 55, 43, 22, 32, 43, 763, 43];

このとき、763 と 43 は複数回出現しているため完全に除外され、期待される出力は次のようになります。

const output = [55, 22, 32];

使用するメソッド

この処理を実現するために、以下の2つのArrayメソッドを利用します。

• Array.prototype.indexOf()
  検索対象の要素が配列内に存在する場合、最初に出現する位置のインデックスを返します。存在しない場合は -1 を返します。
• Array.prototype.lastIndexOf()
  検索対象の要素が配列内に存在する場合、最後に出現する位置のインデックスを返します。存在しない場合は -1 を返します。

この2つを組み合わせると、「indexOf(item) と lastIndexOf(item) が一致する＝その要素は配列内に1回しか出現していない」と判定できます。

実装コード

filter() メソッドのコールバック内でこの条件を使うことで、重複していない要素だけを抽出できます。

const arr = [763, 55, 43, 22, 32, 43, 763, 43];

const deleteDuplicate = (arr) => {
  const output = arr.filter((item, index, array) => {
    // 最初の出現位置と最後の出現位置が一致 → 1回しか出現していない
    return array.indexOf(item) === array.lastIndexOf(item);
  });
  return output;
};

console.log(deleteDuplicate(arr));

コードのポイント

filter() のコールバック関数は、「要素・インデックス・元の配列」の3つの引数を受け取れます。ここでは第3引数 array を使って元の配列全体を参照し、各要素の出現回数を判定しています。

なお、この手法は要素ごとに indexOf() と lastIndexOf() を実行するため計算量は O(n²) です。大量のデータを扱う場合は、Map や Object で出現回数を先に集計してから絞り込む方法の方が効率的なので、用途に応じて使い分けるとよいでしょう。

実行結果

上記のコードをコンソールで実行すると、次の出力が得られます。

[ 55, 22, 32 ]

このように、indexOf() と lastIndexOf() の結果を比較するだけで、配列から「一度も重複していない要素」だけを簡単に取り出すことができます。