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

配列から重複値を完全に取り除く関数を作る

JavaScriptでは、配列を受け取り、その中からすべての重複値を完全に除去した新しい配列を返す関数を作成できます。ここでいう「重複の完全な削除」とは、元の配列で2回以上登場した値は、たとえ1回でも新しい配列には含めない、という意味です。

例えば、次のような入力があったとします。

const arr = [23,545,43,232,32,43,23,43];

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

const output = [545, 232, 32];

ご覧の通り、23と43は元の配列内で複数回出現しているため、結果からは完全に除外されています。

indexOf() と lastIndexOf() の違いを理解する

この問題を解く鍵となるのが、次の2つの配列メソッドです。

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

どちらのメソッドも左から右へ検索を行い、第2引数が指定されていない場合はインデックス 0 から探索を開始します。第2引数に数値が指定された場合は、その位置から探索します。

重要なポイント

ここで注目すべき点は、ある要素に対して indexOf() と lastIndexOf() が同じインデックスを指すとき、その要素は配列内に1回しか存在しないということです。逆に言えば、両者が異なるインデックスを返せば、それは重複している要素だと判断できます。この性質を利用してコードを実装します。

実装コード

Array.prototype.filter() メソッドと組み合わせることで、簡潔に実装できます。filter() は各要素に対してコールバック関数を実行し、true を返した要素だけで構成される新しい配列を生成します。

const arr = [23,545,43,232,32,43,23,43];

const deleteDuplicate = (arr) => {
    const output = arr.filter((item, index, array) => {
        return array.indexOf(item) === array.lastIndexOf(item);
    });
    return output;
};

console.log(deleteDuplicate(arr));

実行結果

コンソールに出力される結果は以下の通りです。

[ 545, 232, 32 ]

補足：パフォーマンスに関する注意

この方法はシンプルで分かりやすい一方、indexOf() と lastIndexOf() が各要素ごとに配列全体を走査するため、計算量は O(n²) になります。大きな配列を扱う場合は、Map や Object を使って各要素の出現回数を先にカウントしてからフィルタリングする方法の方が効率的です。