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

はじめに

本記事では、配列を受け取り、その中に2回以上出現する値をすべて除外した新しい配列を返す関数の作成方法を解説します。ここでのポイントは、単に重複を1つ残るようにまとめるのではなく、元の配列で複数回登場した値は新しい配列から完全に取り除くという点です。

処理のイメージ

例えば、次のような入力が与えられたとします。

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

この場合、763は2回、43は3回出現しているため、これらをすべて排除し、期待される出力は次のようになります。

const output = [55, 22, 32];

使用するメソッド

この問題を解決するために、以下の2つの配列メソッドを活用します。

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

この2つの戻り値が一致するのは、その要素が配列内に1回しか出現していない場合だけです。この性質を利用することで、ユニークな要素のみを抽出できます。

実装コード

filter() メソッドと組み合わせて、次のように関数を実装します。

const arr = [763,55,43,22,32,43,763,43];
const deleteDuplicate = (arr) => {
    const output = arr.filter((item, index, array) => {
        return array.indexOf(item) === array.lastIndexOf(item);
    });
    return output;
};
console.log(deleteDuplicate(arr));

コードの解説

filter() のコールバック関数内では、各要素について indexOf(item) と lastIndexOf(item) の結果を比較しています。両者が等しい場合、その要素は配列内に1度しか存在しないため、条件式は true を返し、結果の配列に残ります。逆に複数回出現する要素は両者の値が異なるため、自動的に除外されます。

実行結果

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

[ 55, 22, 32 ]

まとめ

indexOf() と lastIndexOf() を比較するシンプルな手法により、繰り返し出現する要素をまとめて削除し、完全にユニークな値だけを残した配列を簡単に作成できます。データクレンジングやフィルタリング処理など、さまざまな場面で応用できるテクニックなので、ぜひ覚えておきましょう。